tw-easing-gradients

name	tw-easing-gradients
description	Replace Tailwind CSS linear gradients with smooth eased gradients using tw-easing-gradients. Use when upgrading bg-gradient-to-*, creating fading backgrounds, or smooth color transitions. Use when this capability is needed.
metadata	{"author":"enisbu"}

tw-easing-gradients

Tailwind CSS v4 plugin for smooth, naturally blending gradients using cubic bezier easing and oklch color interpolation.

Requirements

• Tailwind CSS v4+

Installation

npm install tw-easing-gradients
# or: pnpm add tw-easing-gradients / bun add tw-easing-gradients

Add to global CSS (Tailwind v4):

@import 'tailwindcss';
@plugin "tw-easing-gradients";

Core Patterns

Transparency Fade (Most Common)

Replace standard gradients with smooth fades:

<!-- Fade to transparent -->
<div class="bg-ease-to-b from-black">
  <!-- Fades from black to transparent -->
</div>

<!-- With Tailwind color -->
<div class="bg-ease-to-t from-sidebar">
  <!-- Fades from sidebar color to transparent -->
</div>

Color-to-Color Gradient

<div class="bg-ease-in-out-to-br from-violet-600 to-pink-500">
  <!-- Smooth diagonal gradient -->
</div>

<div class="bg-ease-out-to-r from-[#6366F1] to-[#06B6D4]">
  <!-- Custom hex colors -->
</div>

Replacing Standard Tailwind Gradients

Standard Tailwind	tw-easing-gradients
bg-gradient-to-t	bg-ease-to-t
bg-gradient-to-r	bg-ease-to-r
bg-gradient-to-b	bg-ease-to-b
bg-gradient-to-l	bg-ease-to-l
bg-gradient-to-tl	bg-ease-to-tl
bg-gradient-to-tr	bg-ease-to-tr
bg-gradient-to-bl	bg-ease-to-bl
bg-gradient-to-br	bg-ease-to-br

When to Replace mask-* with bg-ease-*

Replaceable: Solid color backgrounds and overlays.

-<div class="bg-sidebar mask-b-from-25%">
+<div class="bg-ease-to-b from-sidebar">

NOT replaceable: Text fades (mask-* required for fading text content).

<!-- Keep using mask-* for text -->
<p class="mask-r-from-70%">Long text that fades out...</p>

Easing Options

Four easing functions available:

• bg-ease-to-* — Standard ease (default, 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

Direction Reference

Direction	CSS Value
to-t	to top
to-r	to right
to-b	to bottom
to-l	to left
to-tl	to top left
to-tr	to top right
to-bl	to bottom left
to-br	to bottom right

Custom Bezier

Arbitrary easing curves via bracket notation:

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

Configuration

Configure gradient stops in CSS (default: 15):

@plugin "tw-easing-gradients" {
  stops: 20;
}

More stops = smoother gradients but larger CSS output.

Common Upgrade Patterns

Hero Section Overlay

-<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent">
+<div class="absolute inset-0 bg-ease-to-t from-black">

Card Fade Effect

-<div class="bg-gradient-to-b from-white via-white/50 to-transparent">
+<div class="bg-ease-to-b from-white">

Sidebar Fade

-<div class="mask-b-from-25% bg-sidebar">
+<div class="bg-ease-to-b from-sidebar">

Text Fade Overlay

-<div class="absolute bottom-0 h-20 w-full bg-gradient-to-t from-background to-transparent">
+<div class="absolute bottom-0 h-20 w-full bg-ease-to-t from-background">

Card Image Overlay (Pseudo-Element)

-<div class="relative after:absolute after:bottom-0 after:h-1/2 after:w-full after:bg-gradient-to-t after:from-black/80">
+<div class="relative after:absolute after:bottom-0 after:h-1/2 after:w-full after:bg-ease-to-t after:from-black">

---

Source: enisbu/tw-easing-gradients — distributed by TomeVault.