I was working on a card with an image overlay. Black gradient from bottom to top, fading to transparent so the title stays readable. On a 27” display, the result looked like a cheap stock photo from 2009. Three visible stripes, hard edges between them. My first thought: broken display. My second: browser bug. Both wrong.
The banding comes from the CSS itself. I had been ignoring it for years because I mostly work on bright backgrounds with bold colors, where it barely shows up. The moment to-transparent enters the picture, or dark tones near black, you see it everywhere. That’s how tw-easing-gradients came about.
The problem
A plain bg-linear-to-t from-black to-transparent looks harmless. On a decent display you get a grayish stripe in the middle and hard edges at the top and bottom. Classic “gray dead zone”. Linear interpolation between black and transparent black mixes in a way the eye reads as messy.
Andreas Larsen described this back in 2017 in his easing gradients article and built a PostCSS plugin for it at the time. There’s even a W3C proposal for native support that has been hanging in limbo for years. Until that lands, you have to work around it.
Drop-in replacement
The plugin turns one class into another. That’s it.
<div class="bg-linear-to-t from-black to-transparent"></div>
<div class="bg-ease-to-t from-black to-transparent"></div><div class="bg-linear-to-t from-black to-transparent"></div>
<div class="bg-ease-to-t from-black to-transparent"></div>Same from-* and to-* color stops, same direction suffixes (to-t, to-r, to-tl, all eight). Four easing variants: bg-ease-, bg-ease-in-, bg-ease-out-, bg-ease-in-out-. Zero runtime, no JavaScript in the browser.
Where it earns its keep
The most common case: keeping text readable on top of an image. With a plain linear gradient the black block stays solid and doesn’t blend into the image. With easing the same overlay fades naturally, the title stays legible and the image doesn’t look chopped off.
Quiet Mornings
Image overlay
Quiet Mornings
Image overlay
Other places I use it: top and bottom fades on scrolling containers, color-to-color card backgrounds without a muddy middle, and custom bezier curves through the bracket syntax like bg-ease-to-r-[0.22,1,0.36,1] for brand curves.
Which easing fits best is hard to put in words. Click through it live:
bg-ease-in-out-to-t from-foreground to-transparentTry it in the playground
Easier to play with in the browser than to describe in a blog. Tweak direction, easing, and custom bezier live, with color pickers on both sides and a compare slider against plain Tailwind linear.
Live playground
Color pickers, direction, custom bezier editor, and a compare slider in one page.
tw-easing-gradients.enisdev.com/playgroundWhat stuck with me
What stayed with me after building this isn’t the plugin itself, it’s the realization that I had been looking past those stripes for years like bad weather. I see banding everywhere now: hero sections, stock photos, Spotify album covers. Can’t unsee it, best and worst side effect of the whole project.
- Repo: github.com/enisbu/tw-easing-gradients
- Docs and playground: tw-easing-gradients.enisdev.com