Kategorie: Entwicklung
CSS-Verlaufsgenerator
Einen linearen oder radialen Verlauf bauen und das CSS kopieren
Wählen Sie zwei oder drei Farben, stellen Sie den Winkel ein, sehen Sie die Vorschau live und kopieren Sie eine fertige background-image-Deklaration. Alles wird im Browser gerendert.
background-image: linear-gradient(135deg, #0f7b63 0%, #1f4f7a 100%);
Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.
Wozu dieses Werkzeug dient
Einen Verlauf beurteilt man leichter mit dem Auge als beim Tippen, deshalb malt dieses Werkzeug das echte CSS in eine Vorschaufläche, während Sie es verändern. Wählen Sie einen linearen Verlauf mit Winkel in Grad oder einen zentrierten radialen Verlauf, ergänzen Sie optional eine mittlere Farbe für drei Stopps und kopieren Sie die Deklaration direkt in Ihr Stylesheet.
So funktioniert es
- Wählen Sie einen linearen oder radialen Verlauf.
- Wählen Sie Start- und Endfarbe, optional eine mittlere Farbe.
- Stellen Sie den Winkel ein und kopieren Sie die CSS-Deklaration.
Datenschutz
Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.
Häufig gestellte Fragen
- Wird etwas hochgeladen?
- Nein. Die Vorschau ist ein CSS-Hintergrund, den Ihr Browser malt, und die Deklaration entsteht in der Seite. Es geht nichts an einen Server.
- Brauche ich Hersteller-Präfixe?
- Für aktuelle Browser nicht. linear-gradient und radial-gradient werden seit vielen Jahren ohne Präfix unterstützt.
- In welche Richtung zeigt der Winkel?
- In CSS läuft 0deg von unten nach oben, der Winkel wächst im Uhrzeigersinn: 90deg läuft von links nach rechts, 180deg von oben nach unten.