Eingabe
Dein Arbeitsbereich wird vorbereitet…
Anleitung
- Linear oder Radial wählen und zwei Farben festlegen.
- Stopp-Positionen und bei linearen Verläufen den Winkel einstellen.
- CSS kopieren und die background-Deklaration auf das Element anwenden.
Einen CSS-Verlauf steuern
CSS-Verläufe erzeugen Hintergründe aus Farben statt aus einer Bilddatei. Sie skalieren mit Karten, Bannern oder Abschnitten und bleiben im Stylesheet editierbar.
Der Generator verwendet zwei Farben. Wähle eine lineare Richtung oder einen mittigen kreisförmigen Radialverlauf und bestimme Anfang und Ende des Übergangs über die Stopps.
Richtung und Farbstopps
Der Winkel gilt für lineare Verläufe. Radial verwendet einen Kreis in der Elementmitte und benötigt keinen Winkel.
Stopps liegen zwischen 0 % und 100 %. Je näher sie liegen, desto schmaler der Übergang; gleiche Positionen erzeugen eine harte Farbgrenze.
#2563eb → #9333ea, 135 degreesbackground: linear-gradient(135deg, #2563eb 0%, #9333ea 100%);Linearer Verlauf mit zwei Stopps, den gezeigten Farben und dem angegebenen Winkel.
Was die Vorschau zeigt
Die Vorschau nutzt das erzeugte CSS direkt. Ihre Proportionen können vom Zielelement abweichen, besonders bei radialen Verläufen.
Der erste Stopp darf nicht hinter dem zweiten liegen. Erzeugt wird eine Ebene mit zwei Farben; ergänze weitere Stopps oder Ebenen im Stylesheet.
Die Deklaration anwenden
Die Ausgabe beginnt mit background:. Prüfe beim Einfügen in den Zielselektor, welche vorhandenen Hintergrundbilder, Farben oder Kurzschreibweisen dadurch ersetzt werden.
Texteingabe bis 1 MiB. CSS- und HTML-Umwandlungen laufen in einem Worker mit einem Zeitlimit von 30 Sekunden. Farbtools verwenden sRGB; generierte Styles sind Vorschauen und müssen im eigenen Layout getestet werden.
Häufige Fragen
Kann ich eine dritte Farbe hinzufügen?
Der Editor unterstützt zwei Stopps. Weitere kommagetrennte Stopps kannst du nach dem Kopieren im CSS ergänzen.
Warum hat Radial keinen Winkel?
Ein mittiger kreisförmiger Verlauf breitet sich vom Mittelpunkt aus. Der Winkel ist nur für lineare Verläufe relevant.
Kann ich einen harten Farbübergang erzeugen?
Ja. Setze beide Stopps auf dieselbe Position.
Wird eine Bilddatei erzeugt?
Nein. CSS kopieren liefert eine background-Deklaration. Der Browser zeichnet den Verlauf beim Anwenden.
Warum sieht der Verlauf auf meinem Element anders aus?
Größe und Proportionen beeinflussen das Ergebnis. Prüfe es auf dem tatsächlichen Element und nicht nur auf der Vorschaukarte.