CSS-Verlaufsgenerator
Wähle zwei Farben, entscheide dich für einen linearen oder radialen Verlauf und passe den Winkel an, um eine Live-Vorschau zu sehen. Der passende CSS-Code wird sofort erzeugt und kann direkt in dein Stylesheet kopiert werden.
background: linear-gradient(90deg, #ff9a00, #60acfc);So funktioniert’s
Wähle deine beiden Farben mit den Farbauswahlfeldern, entscheide dich für „linear“ oder „radial“ und ziehe bei linearen Verläufen den Winkel-Regler. Vorschau und CSS-Code darunter aktualisieren sich sofort bei jeder Änderung.
Tipp
Ein Winkel von 90 Grad verläuft von links nach rechts, 180 Grad von oben nach unten und 0 Grad von unten nach oben — probiere den Regler aus, um zu sehen, wie sich die Richtung ändert.
Was ist der Unterschied zwischen linear und radial?
Ein linearer Verlauf verläuft entlang einer geraden Linie im gewählten Winkel. Ein radialer Verlauf breitet sich kreisförmig von der Mitte nach außen aus, unabhängig vom Winkel.
Weitere Tools aus dieser Kategorie
Belichtungsrechner
Finde äquivalente Kamerabelichtungen für Blende, Verschlusszeit und ISO.
Seitenverhältnis-Rechner
Skaliere ein Bild oder Video proportional und finde das vereinfachte Verhältnis.
Kontrast-Checker
Prüfe, ob Vorder- und Hintergrundfarbe die WCAG-Kontrastrichtlinien erfüllen.
Farbpaletten-Generator
Verwandle jede Grundfarbe in komplementäre, analoge und triadische Farbpaletten.
Farbformat-Konverter
Wandle jede Farbe sofort zwischen HEX, RGB, HSL und CMYK um – mit Ein-Klick-Kopieren für jedes Format.
Typografie-Skalen-Generator
Erzeuge aus einer Basisschriftgröße und einem Skalenverhältnis eine stimmige Reihe von Schriftgrößen, fertig zum Kopieren als CSS Custom Properties.