enisbu/tw-easing-gradients

61 stars Quality 40 Trend 40

Tailwind CSS v4 plugin for smooth easing gradients

Overview

Smooth, naturally blending gradients for Tailwind CSS Cubic bezier easing • Custom curves • oklch color interpolation • Drop-in replacement 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. to-t · to-r · to-b · to-l · to-tl · to-tr · to-bl · to-br Use arbitrary values for custom easing curves: - larsenwork.com — Original easing gradients concept - postcss-easing-gradients — PostCSS implementation - CSSWG Proposal — W3C proposal for native support A SKILL.md is included for AI assistants (Claude Code, Codex, OpenCode) to automatically upgrade bg-gradient-to-* utilities. - [x] Custom bezier functions - [ ] Radial gradients - [ ] Conic gradients

README

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

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:

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

[x] Custom bezier functions
[ ] Radial gradients
[ ] Conic gradients

Contributing

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

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

License

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

View this README on GitHub

Recommended Tools

Try a different keyword or remove a filter.

Install

npx skillfish add enisbu/tw-easing-gradients