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 oklch 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

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.