Introduction

tw-easing-gradients creates smooth, perceptually uniform gradients for Tailwind CSS v4. Drag the slider above to see the difference.

The Problem

Standard CSS gradients use linear interpolation, which creates visible "banding" - harsh edges especially noticeable when fading to transparency or between certain color pairs.

Card Overlays

A common use case: text overlays on images. The linear gradient stays solid and doesn't blend, while the eased version fades naturally into the image:

bg-linear-to-t Tailwind Standard

Featured Content

Notice how the gradient stays solid and abrupt.

bg-ease-to-t tw-easing-gradients

Featured Content

Smooth. Natural. Like it should be.

Features

• Smooth transitions - No more harsh color bands
• oklch color space - Colors blend naturally without getting gray or muddy in the middle
• Multiple easing functions - ease, ease-in, ease-out, ease-in-out
• All directions - 8 gradient directions supported
• Works with Tailwind colors - Uses existing from-* and to-* utilities
• Zero runtime JS - Pure CSS output

Quick Start

		<!-- Standard Tailwind -->
<div class="bg-linear-to-b from-black to-transparent"></div>
 
<!-- With tw-easing-gradients -->
<div class="bg-ease-to-b from-black to-transparent"></div>
	

Next Steps