CSS-Gradient-Generator: Schöne Verläufe erstellen | Kostenlos

A Farben wählen, Typ und Winkel einstellen, CSS kopieren.

A Ja.

A Um sicherzustellen, dass Ihre CSS-Farbverläufe perfekt zur visuellen Identität Ihrer Marke passen, verwenden Sie die benutzerdefinierten Farbeingabefelder. Fügen Sie einfach Ihre spezifischen Hex-Codes (z.B. #RRGGBB) in die Farbwähler ein. So können Sie Farbverläufe mit Ihren exakten Markenfarben generieren und die Konsistenz über alle Ihre Webelemente hinweg gewährleisten. Passen Sie den Winkel an und fügen Sie bei Bedarf weitere Farbstopps hinzu, um den gewünschten Effekt zu erzielen.

A Um einen mehrfarbigen CSS-Farbverlauf zu gestalten, klicken Sie einfach auf die Schaltfläche "Farbe hinzufügen" oder eine ähnliche Anzeige, die sich normalerweise zwischen oder neben den vorhandenen Farbwählern befindet. Dadurch wird ein zusätzlicher Farbstopp eingeführt. Sie können dann eine neue benutzerdefinierte Hex-Farbe für diesen Stopp auswählen und deren Position entlang der Verlaufsleiste anpassen, um einen sanften oder abrupten Übergang mit der gewünschten Mischung aus mehreren Farben zu erzielen.

A Lineare Verläufe fließen in einer geraden Linie, entweder horizontal, vertikal oder diagonal. Sie steuern die Richtung mit dem Winkelregler, z.B. auf 90 Grad für einen vertikalen Übergang. Radiale Verläufe dehnen sich von einem zentralen Punkt nach außen aus und erzeugen einen kreisförmigen oder elliptischen Effekt. Sie können die Form über kreisförmig hinaus mit diesem Werkzeug nicht direkt steuern, aber Sie können den Mittelpunkt festlegen.

A Der Generator erzeugt standardkonformes CSS für Chrome, Firefox, Safari und Edge. Der Internet Explorer 9 und älter zeigt keine Farbverläufe an – das betrifft heute weniger als 1% des weltweiten Traffics. Für alte Browser platzieren Sie vor der Gradient-Eigenschaft eine einfache Hintergrundfarbe als Fallback. So sehen Nutzer zumindest eine Volltonfarbe. Ein schneller Test: Fügen Sie den Code in die Entwicklertools eines modernen Browsers ein.