CSS-Verlaufsgenerator
Erstelle lineare, radiale und konische Verläufe mit dem CSS-Verlaufsgenerator: Live-Vorschau, Farbstopps, Winkel, Vorlagen. Kostenlos online, Code kopieren.
What next?
Hilfreich? Teilen Sie CSS-Verlaufsgenerator
Kostenlos, ohne Anmeldung, läuft im Browser – schick es einem Freund oder füge es deiner Seite hinzu.
Ähnliche Tools
- FarbwählerWähle Farben mit dem Farbwähler und wandle HEX in RGB, HSL, HSV und CMYK um. Kostenlos online mit Bild-Pipette, Tönungen und WCAG-Kontrastprüfung.
- Farbenblindheit-SimulatorSieh Bilder so, wie Farbenblinde sie sehen — simuliere Deuteranopie, Protanopie, Tritanopie und Achromatopsie online kostenlos, mit einstellbarem Schweregrad.
- Zufallsfarben-GeneratorErzeuge Zufallsfarben mit dem Zufallsfarben-Generator: pastell, kräftig, dunkel, warm oder kühl, mit HEX-, RGB- und HSL-Codes zum Kopieren. Kostenlos online.
- Binär-ÜbersetzerText in Binär und Binär in Text übersetzen mit diesem kostenlosen Online-Binärübersetzer und Zahlen zwischen Binär, Dezimal, Hex und Oktal umrechnen.
- Diff-CheckerVergleiche zwei Texte mit dem Diff-Checker und markiere jeden Unterschied nach Zeile, Wort oder Zeichen. Kostenlos online, Groß-/Kleinschreibung ignorierbar.
- QR-Code-GeneratorErstelle QR-Codes mit dem QR-Code-Generator für URLs, Text, WLAN, E-Mail und SMS. Kostenlos online, ohne Anmeldung, läuft nie ab, als PNG oder SVG.
Teil dieser Toolkits
So verwenden Sie CSS-Verlaufsgenerator
- 1Wähle Linear, Radial oder Konisch und stelle Winkel oder Form ein
- 2Wähle Farben mit dem Farbwähler oder gib Hex-Codes ein, ziehe die Position jedes Farbstopps, füge bis zu 8 Farben hinzu oder starte mit einer Vorlage oder Zufall
- 3Klicke auf CSS kopieren, um die Hintergrundregel (mit einfarbigem Fallback) in dein Stylesheet einzufügen
Häufig gestellte Fragen
Wie erstelle ich einen Farbverlauf als Hintergrund in CSS?▾
Verwende die Eigenschaft background mit einer Verlaufsfunktion, z. B. background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);. Der Winkel legt die Richtung fest, und jede Farbe kann eine Stopp-Position haben.
Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?▾
Lineare Verläufe mischen entlang einer Geraden in einem Winkel, radiale Verläufe breiten sich von einem Mittelpunkt nach außen aus, und konische Verläufe führen Farben wie ein Farbrad oder Kreisdiagramm um die Mitte herum.
Was bedeutet der Winkel bei linear-gradient?▾
0deg zeigt nach oben (unten nach oben), 90deg geht von links nach rechts, 180deg von oben nach unten und 135deg verläuft diagonal von links oben nach rechts unten.
Funktionieren CSS-Verläufe in allen Browsern?▾
Lineare und radiale Verläufe funktionieren in jedem modernen Browser ohne Präfixe. Konische Verläufe werden seit 2020 in allen aktuellen Browsern unterstützt. Der erzeugte Code fügt zuerst eine Volltonfarbe als Fallback hinzu.
Kann ich einen Farbverlauf auf Text anwenden?▾
Ja: Setze den Verlauf als background und füge dem Textelement background-clip: text; -webkit-background-clip: text; und color: transparent; hinzu.
Embed CSS-Verlaufsgenerator on your website▾
Paste this snippet into your page. The embedded tool runs in your visitor's browser and shows a small “Powered by clkr.work” link.