CSS-Gradientengenerator

CSS-Gradientengenerator ist ein kostenloses Online-Tool, mit dem Sie wunderschöne CSS-Verläufe mit einer visuellen Oberfläche und einer Live-Vorschau erstellen können. Es unterstützt lineare, radiale und konische Farbverlaufstypen, sodass Sie atemberaubende Farbübergänge für Website-Hintergründe, Schaltflächen, Karten und andere Benutzeroberflächenelemente entwerfen können.

Das Tool bietet eine intuitive Drag-and-Drop-Oberfläche zum Hinzufügen und Positionieren von Farbstopps, zur Einstellung der Farbverlaufsrichtung und -winkel sowie zur Feinabstimmung. Sie können genau sehen, wie Ihr Farbverlauf in Echtzeit aussieht, sodass Sie mit verschiedenen Farbkombinationen einfach experimentieren können, bis Sie das perfekte Ergebnis erzielen.

Sobald Sie mit Ihrem Verlauf zufrieden sind, kopieren Sie einfach den generierten CSS-Code und fügen Sie ihn in Ihr Stylesheet ein. Das Tool gibt ein sauberes, browser-kompatibles CSS aus, das in allen modernen Browsern funktioniert. Es ist kein Design- oder Codierungs-Know-how erforderlich, um professionell aussehende Farbverläufe zu erstellen.

Eines ist darüber zu wissen, wie Browser Gradienten zeichnen: Farben werden in sRGB interpoliert, was wahrnehmungsmäßig nicht gleichmäßig ist. Das Mischen zweier stark entgegengesetzter Farben, wobei Blau zu Gelb der klassische Fall ist, führt den Mittelpunkt durch ein entsättigtes Grau, das keine Endfarbe vermuten lässt. Die üblichen Fixierungen bestehen darin, einen Anschlag in der Mitte hinzuzufügen, um den Weg zu steuern, oder Endfarben näher beieinander auf dem Rad auszuwählen. Das Wiederholen eines Stopps an derselben Position erzeugt eine harte Kante und keine Mischung, so werden Streifen- und Bandeffekte erstellt. Herstellerpräfixe werden für Standardgradienten in keinem Browser, der noch Updates erhält, daher ist die kürzeste Ausgabe auch am kompatibelsten. Gradienten sind als Kästchen mit allen Hintergründen sichtbar.