tw-easing-gradients

A Tailwind CSS v4 plugin that creates smooth, naturally blending gradients using cubic bezier easing and oklch color interpolation.

Installation

npm install tw-easing-gradients

Add the plugin to your CSS file:

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

Usage

Transparency Fade

<div class="bg-ease-to-b from-black">
  <!-- Fades from black to transparent -->
</div>

Color-to-Color Gradient

<div class="bg-ease-in-out-to-br from-violet-600 to-pink-500">
  <!-- Smooth diagonal gradient -->
</div>

Available Classes

Easing	Directions
`bg-ease-to-{dir}`	t, r, b, l, tl, tr, bl, br
`bg-ease-in-to-{dir}`	t, r, b, l, tl, tr, bl, br
`bg-ease-out-to-{dir}`	t, r, b, l, tl, tr, bl, br
`bg-ease-in-out-to-{dir}`	t, r, b, l, tl, tr, bl, br

Configuration

Configure the number of gradient stops (default: 15):

@plugin "tw-easing-gradients" {
  stops: 20;
}

More stops create smoother gradients but increase CSS output size.

How It Works

The plugin generates multiple color stops using color-mix() in oklch color space. The easing function controls the distribution of color stops, creating smooth transitions instead of harsh linear blends.

Documentation

Full API reference, examples, and interactive playground: tw-easing-gradients.enisdev.com

License

MIT