Was ist Verlauf zu CSS?

Ein visueller Gradientenersteller, mit dem du lineare, radiale und konische Verläufe mit mehreren Farbstopps gestalten und den CSS-Code kopieren kannst. Passe Winkel, Positionen und Farben mit einer Live-Vorschau an.

Bauen Sie lineare, radiale oder konische Gradienten, indem Sie Stops auf einer Live-Leiste verschieben und die Vorschau in Echtzeit beobachten. Ein bestehender CSS-Gradient lässt sich per Paste sofort weiterbearbeiten; Presets wie Sunset, Aurora oder Rainbow geben einen schnellen Start, dann Winkel anpassen und Syntax kopieren. Die Ausgabe ist reines CSS, ohne Browser-Präfixe und ohne JavaScript.

Anleitung

1. Wählen Sie einen Verlaufstyp (linear, radial oder konisch) und legen Sie die Richtung oder den Winkel fest.
2. Fügen Sie Farbstopps hinzu, entfernen oder passen Sie sie an, indem Sie auf die Verlaufsleiste klicken oder die Farbauswahl nutzen.
3. Kopieren Sie den generierten CSS-Code zur direkten Verwendung in Ihrem Stylesheet.

Wann verwenden

• Hintergrund einer Hero-Section, bei der Stop-Positionen und Winkel exakt sitzen sollen.
• Bestehenden Gradient aus dem Stylesheet einfügen, visuell anpassen, wieder zurückkopieren.
• Konischen Gradient für Tortendiagramm-artige Hintergründe oder Regenbogen-Loader erzeugen.

Ergebnis

Probiere einen Sonnenuntergangs-Verlauf: linear-gradient(135deg, #ff6b35 0%, #f72585 50%, #7209b7 100%) — ideal als Hintergrund für einen Hero-Bereich.

Häufige Fragen

Was unterscheidet linear, radial und conic?

Linear führt die Farben entlang eines geraden Winkels. Radial fächert aus einem Mittelpunkt in konzentrischen Ringen auf. Conic dreht sich wie ein Tortendiagramm um den Mittelpunkt. Alle drei nehmen dieselbe Color-Stop-Syntax.

Wie importiere ich einen Gradient, den ich schon im CSS habe?

Vollständige Deklaration ins Import-Feld einfügen, also etwa background: linear-gradient(135deg, #ff6b35, #f72585);, und Import drücken. Der visuelle Editor übernimmt Winkel, Stops und Typ automatisch.

Warum sehe ich auf manchen Bildschirmen Banding?

Banding entsteht, wenn benachbarte Stops in der Farbtonskala weit auseinanderliegen und das Display nur 8 Bit Farbtiefe hat. Ein Zwischen-Stop oder ein kleinerer Winkelbereich hilft. Browser mit HDR-Rendering zeigen deutlich weniger Banding.

Kann ich die Ausgabe als background-image nutzen?

Ja. Die kopierte Zeichenkette funktioniert als Wert für background, background-image und überall, wo CSS ein Bild erwartet: border-image, mask, in modernen Browsern auch SVG fill.

Fügt die Ausgabe Präfixe wie -webkit- hinzu?

Nein. Lineare, radiale und konische Gradienten laufen seit 2017 in allen Evergreen-Browsern ohne Präfix. Präfixe heute aufzunehmen bläht das Stylesheet nur unnötig auf.

Ähnliche Tools