tw-easing-gradients: a Tailwind CSS v4 plugin that fixes the harsh transitions in standard CSS gradients.
Key features:
- Cubic bezier easing curves (ease, ease-in, ease-out, ease-in-out)
- OKLCH color interpolation to prevent muddy midtones
- Zero JavaScript runtime
- Works with Tailwind's from-* and to-* utilities
- Eight gradient directions including diagonals
You install it, add one line to your CSS config, then use utilities like bg-ease-to-b from-black to-transparent for natural fades.
The plugin generates multiple color stops along easing curves, which removes the abrupt edges you see in linear gradients.
Requires Tailwind CSS v4 and modern browsers with CSS relative color syntax support.
Top comments (0)