CSS Gradient Generator

Über dieses Tool

Der CSS-Verlaufsgenerator erstellt weiche Mehrfarbenverläufe, die Sie direkt in Ihr CSS einfügen können. Er unterstützt lineare (gerichtete) und radiale (kreisförmige) Verläufe mit beliebig vielen Farbstopps.

Farbstopps definieren, wo jede Farbe entlang der Verlaufsachse beginnt und endet. Der Winkel-Schieberegler dreht lineare Verläufe von 0° bis 360°.

Anleitung

1. Wählen Sie den Verlaufstyp: Linear oder Radial.
2. Für lineare Verläufe den Winkel-Schieberegler ziehen, um die Richtung festzulegen.
3. Klicken Sie auf ein Farbfeld, um die Farbe zu ändern, und ziehen Sie den Schieberegler für die Position.
4. + Hinzufügen klicken für weitere Farbstopps. ✕ zum Entfernen.
5. Auf Kopieren klicken, um die CSS-background-Deklaration zu kopieren.

Anwendungsfälle

Webdesigner erstellen Hero-Abschnitt-Hintergründe mit CSS-Verläufen statt Bildern. Markenteams generieren Verlaufspaletten, die zu den Corporate-Color-Guidelines passen. Entwickler prototypisieren Karten, Schaltflächen und Overlays.

Häufige Fragen

• Was ist der Unterschied zwischen linearen und radialen Verläufen? — Ein linearer Verlauf wechselt Farben entlang einer geraden Linie in einem bestimmten Winkel. Ein radialer Verlauf strahlt Farben von einem Mittelpunkt nach außen aus.
• Kann ich mehr als zwei Farben verwenden? — Ja. Klicken Sie auf + Hinzufügen, um beliebig viele Farbstopps hinzuzufügen.
• Ist das generierte CSS browserübergreifend kompatibel? — Ja. Die Funktionen linear-gradient() und radial-gradient() werden in allen modernen Browsern ohne Vendor-Prefixes vollständig unterstützt.