Linear gradients produce hard color transitions. Fix them with easing functions, directly in your utility classes.
Drag the slider to compare linear vs eased gradients.
Everything you need for production-grade eased gradients.
ease, ease-in, ease-out, ease-in-out. Matching CSS timing functions you already know.
All cardinal and diagonal directions. Use bg-ease-to-r, bg-ease-to-tl, and more.
Colors blend naturally without getting gray or muddy in the middle.
Pure CSS output. No JavaScript, no hydration cost, no bundle size impact.
Works with Tailwind's native gradient color utilities. Use any color value.
Generates standard CSS gradients with multiple color stops for smooth easing.
Replace bg-linear-to-r with bg-ease-in-out-to-r . Done.
<div class="bg-ease-in-out-to-r from-indigo-500 to-cyan-500">
<!-- Smooth gradient -->
</div>Compare all four easing functions side by side.