Ich saß an einer Card mit Image-Overlay. Schwarzes Gradient von unten nach oben, fade to transparent, damit der Titel lesbar bleibt. Auf einem 27”-Display sah das aus wie ein billiges Stockfoto aus 2009. Drei sichtbare Streifen, harte Kanten dazwischen. Erst dachte ich, mein Display sei kaputt. Dann: Browser-Bug. Beides falsch.
Das Banding kommt aus dem CSS selbst. Ich hatte es jahrelang ignoriert, weil ich meistens auf hellen Hintergründen mit kräftigen Farben arbeite, wo es kaum auffällt. Sobald aber to-transparent ins Spiel kommt oder dunkle Töne nahe Schwarz, sieht man es überall. Daraus ist tw-easing-gradients geworden.
Das Problem
Ein simples bg-linear-to-t from-black to-transparent sieht harmlos aus. Auf einem ordentlichen Display erscheint in der Mitte ein grau-stichiger Streifen, dazu harte Übergänge oben und unten. Das ist die klassische “gray dead zone”. Lineare Interpolation zwischen Schwarz und transparentem Schwarz mischt sich auf eine Art, die das Auge als Unsauberkeit liest.
Andreas Larsen hat das 2017 in seinem Easing-Gradients-Artikel sauber beschrieben und damals ein PostCSS-Plugin dafür gebaut. Es gibt sogar einen W3C-Vorschlag für native Unterstützung, der seit Jahren in der Schwebe hängt. Bis es soweit ist, muss man sich selbst behelfen.
Drop-in Replacement
Mein Plugin macht aus einer Klasse eine andere. Mehr nicht.
<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>Gleiche from-* und to-* Color Stops, gleiche Direction-Suffixe (to-t, to-r, to-tl, alle acht). Vier Easing-Varianten: bg-ease-, bg-ease-in-, bg-ease-out-, bg-ease-in-out-. Zero Runtime, kein JavaScript im Browser.
Wo es sich lohnt
Der häufigste Fall: Text auf einem Bild lesbar halten. Beim linearen Gradient bleibt der schwarze Block solid und blendet nicht ins Bild ein. Mit Easing fadet derselbe Overlay natürlich aus, der Titel bleibt lesbar, das Bild wirkt nicht abgeschnitten.
Quiet Mornings
Image-Overlay
Quiet Mornings
Image-Overlay
Andere Stellen, an denen ich es einsetze: Top- und Bottom-Fades an scrollenden Containern, Color-zu-Color-Backgrounds in Cards (kein matschiger grauer Mittelteil), und Custom-Bezier-Kurven über die Bracket-Syntax wie bg-ease-to-r-[0.22,1,0.36,1] für Brand-Curves.
Welches Easing am besten passt, kann man schwer beschreiben. Hier kannst du live durchklicken:
bg-ease-in-out-to-t from-foreground to-transparentProbier es im Playground
Lässt sich besser im Browser drehen als im Blog beschreiben. Direction, Easing und Custom-Bezier live anpassen, mit Color-Pickern auf beiden Seiten und einem Compare-Slider gegen das normale Tailwind-Linear.
Live Playground
Color-Picker, Direction, Custom-Bezier-Editor und Compare-Slider in einer Seite.
tw-easing-gradients.enisdev.com/playgroundWas hängenbleibt
Was mir nach dem Bauen geblieben ist, ist weniger das Plugin selbst und mehr die Erkenntnis, dass ich jahrelang über diese Streifen drübergeguckt habe wie über schlechtes Wetter. Seitdem sehe ich Banding überall: in Hero-Sections, auf Stockfotos, in Spotify-Album-Covers. Lässt sich nicht mehr abstellen, beste und gleichzeitig schlechteste Nebenwirkung des Projekts.
- Repo: github.com/enisbu/tw-easing-gradients
- Doku und Playground: tw-easing-gradients.enisdev.com