tw-easing-gradients

Smooth, naturally blending gradients for Tailwind CSS
_{Cubic bezier easing • Custom curves • oklab color interpolation • Drop-in replacement}

---

Why?

Standard CSS gradients distribute colors linearly, resulting in sharp edges at the start and end of the gradient. This is particularly noticeable in transparency fades, where the transition looks abrupt rather than natural.

This plugin distributes color stops along an easing curve using color-mix() in the oklab color space, resulting in smooth, natural-looking transitions.

Installation

npm install tw-easing-gradients

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

Usage

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

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

Try it live: Playground

Easing Functions

Class	Effect
bg-ease-to-*	Standard ease (most natural)
bg-ease-in-to-*	Slow start, fast end
bg-ease-out-to-*	Fast start, slow end
bg-ease-in-out-to-*	Slow start and end

Directions

to-t · to-r · to-b · to-l · to-tl · to-tr · to-bl · to-br

Custom Bezier

Use arbitrary values for custom easing curves:

<div class="bg-ease-to-r-[0.22,1,0.36,1] from-black"></div>
<div class="bg-ease-to-b-[0.42,0,0.58,1] from-violet-600 to-pink-500"></div>

Color Interpolation

Colors mix in oklab by default, the same as Tailwind's bg-linear-*. Add a modifier to pick another color space, exactly like Tailwind's own gradients:

<div class="bg-ease-in-out-to-r/oklch from-blue-500 to-yellow-400"></div>
<div class="bg-ease-to-r/longer from-rose-500 to-indigo-500"></div>

/oklch keeps saturated colors vivid through the middle. Skip it for fades to or from transparent, white, black or gray: those colors have no hue, and the gradient picks up a wrong tint.

Documentation

tw-easing-gradients.enisdev.com/docs

Prior Art & Inspiration

• larsenwork.com — Original easing gradients concept
• postcss-easing-gradients — PostCSS implementation
• CSSWG Proposal — W3C proposal for native support

AI Coding Assistant

A SKILL.md is included for AI assistants (Claude Code, Codex, OpenCode) to automatically upgrade bg-gradient-to-* utilities.

---

Roadmap

• Custom bezier functions
• Radial gradients
• Conic gradients

Contributing

Contributions welcome! Whether it's a bug fix, feature, or documentation improvement.

1. Fork the repo
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes
4. Push to the branch and open a PR

License

tw-easing-gradients is open-source and free to use. Licensed under MIT.