Smooth CSS Gradients with easing-gradients (A TailwindCSS Plugin)

easing-gradients: a Tailwind CSS plugin that applies easing curves to gradient stop distribution. Linear gradients often show hard edges at the start or end. This plugin fixes that.

Key features:

• Four preset curves (linear, in, out, in-out)
• Custom cubic-bezier support
• Works with Tailwind v4
• No JavaScript, just CSS custom properties

Install with pnpm add easing-gradients, then add @plugin "easing-gradients" to your CSS file. Use classes like gradient-ease-in-out on any gradient background.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo