CSS-Farbverlauf-Generator

CSS-Farbverläufe visuell erstellen

CSS-Farbverläufe sind leistungsstark, weil sie sich perfekt skalieren lassen, sofort laden und keine Bilddateien benötigen. Mit einer einzigen Deklaration erzeugen sie Hero-Hintergründe, Button-Akzente, Karten, Overlays, Diagrammfüllungen und dezente dekorative Flächen. Dieser Farbverlauf-Generator zeigt Ihnen eine Live-Vorschau, während Sie Farben, Stopp-Positionen und Richtung anpassen, und gibt anschließend eine fertige background:-Regel für Ihr Stylesheet aus.

Das Tool unterstützt sowohl lineare als auch radiale Verläufe. Lineare Verläufe ziehen sich in einer durch einen Winkel bestimmten Richtung über ein Element und eignen sich für Banner, Buttons und diagonale Lichteffekte. Radiale Verläufe strahlen vom Zentrum aus und passen gut zu Spotlights, Glow-Effekten, weichen Hintergründen und Fokusbereichen. Da die Vorschau normales Browser-CSS verwendet, sehen Ihre Besucher genau die Art von Verlauf, die Sie hier sehen.

Mit Farbstopps arbeiten

Ein Farbstopp teilt dem Browser mit, welche Farbe bei einem bestimmten Prozentwert des Verlaufs erscheinen soll. Zwei Stopps erzeugen einen einfachen Übergang von einer Farbe zur anderen, während drei oder mehr Stopps ein Highlight einführen, über eine Markenfarbe führen oder eine Farbe über einen größeren Teil des Elements halten können. Stopps, die näher beieinanderliegen, ergeben einen schärferen Übergang; weiter auseinanderliegende einen weicheren. Setzen Sie zusätzliche Stopps sparsam ein, denn ein Verlauf mit zu vielen unzusammenhängenden Farbtönen kann ablenken.

Farbverläufe in echten Oberflächen einsetzen

Farbverläufe lassen sich am leichtesten pflegen, wenn sie den Inhalt unterstützen, statt mit ihm zu konkurrieren. Achten Sie in textlastigen Bereichen auf hohen Kontrast und erwägen Sie ein halbtransparentes Overlay zwischen Verlauf und Text. Testen Sie bei Buttons und dekorativen Karten die Zustände Hover und Fokus, damit der Verlauf Umrisse nicht verdeckt und die Lesbarkeit nicht mindert. Kopieren Sie das erzeugte CSS in Ihr Projekt und passen Sie Abstände, Eckenradius und Vordergrundfarben im Kontext an. Der beste Verlauf ist der, der die Hierarchie stärkt und die Oberfläche klar hält.