CSS-Verlauf-Generator
Erstellen Sie CSS-Verläufe visuell — linear, radial und konisch. Fügen Sie mehrere Farbstopps hinzu und kopieren Sie den fertigen CSS-Code.
Funktionen
Anleitung
1. Verlaufstyp und Winkel wählen; die Fläche zeigt die Vorschau in voller Größe.
2. Griffe auf der Leiste ziehen, um Stopps zu verschieben; ein Klick auf eine freie Stelle fügt einen hinzu (bis zu sechs). Feinjustierung über Farbfelder und Prozentwerte.
3. Das erzeugte CSS kopieren — auf dem Schachbrett lassen sich Streifen über Transparenz erkennen.
Über dieses Werkzeug
CSS-Verläufe malen weiche Farbübergänge ohne Bilddateien, bleiben daher in jeder Größe scharf und kosten keinen Download. Dieser Generator erstellt die drei nativen Typen: linear-gradient entlang eines Winkels, radial-gradient, der sich von der Mitte aus ausbreitet, und conic-gradient, der wie ein Farbrad um einen Punkt kreist. Ziehen Sie die Anfasser auf der Leiste, um Farbstopps zu verschieben, klicken Sie auf die Leiste, um einen Stopp hinzuzufügen (bis zu sechs), und justieren Sie Farben und Positionen in den Feldern. Die Bühne zeigt das Ergebnis in voller Größe, und ein Schachbrettmuster macht Streifenbildung oder unerwartete Transparenz sichtbar. Die Ausgabe ist Standard-CSS, das in allen aktuellen Browsern funktioniert und direkt in eine background- oder background-image-Deklaration eingefügt werden kann.