JSPM

tw-easing-gradients

1.1.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2397
  • Score
    100M100P100Q131272F
  • License MIT

Tailwind CSS v4 plugin for smooth easing gradients - eliminates hard edges in color transitions

Package Exports

  • tw-easing-gradients

Readme

tw-easing-gradients

tw-easing-gradients

Tailwind CSS v4 npm version npm downloads License

Smooth, naturally blending gradients for Tailwind CSS
Cubic bezier easing • Custom curves • oklch 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 oklch color space, resulting in smooth, natural-looking transitions.


Comparison

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>

Documentation

tw-easing-gradients.enisdev.com/docs

Prior Art & Inspiration

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.