easing-gradients

Tailwind CSS plugin that eases gradient stop distribution to reduce hard edges in fades and overlays.

easing-gradients.ibelick.com

Class	Effect
gradient-ease-linear	Default linear distribution.
gradient-ease-in	More change toward the end.
gradient-ease-out	More change near the start.
gradient-ease-in-out	Smooth ends, stronger middle.
gradient-ease-[cubic-bezier(...)]	Custom easing curve.

Install

pnpm add easing-gradients

@import "tailwindcss";
@plugin "easing-gradients";

Usage

<div
  class="bg-linear-to-b from-black to-transparent gradient-ease-in-out"
></div>

<div
  class="bg-linear-to-r from-blue-500 to-pink-500 gradient-ease-[cubic-bezier(0.3,0,0.2,1)]"
></div>

Notes

• Inspired by https://larsenwork.com/easing-gradients.
• CSSWG proposal https://github.com/w3c/csswg-drafts/issues/1332
• Works with Tailwind CSS v4+.
• License: MIT