Skip to content
Zoyku

CSS-Verlauf-Generator

Mischen Sie zwei bis fünf Farben zu linearen, radialen oder konischen CSS-Verläufen — mit Live-Vorschau, fertigem Code zum Einfügen und harmonisierten Paletten per Klick.

Color stops

Palettes

Angle: 135°
Live preview
CSS
background-color: #7C3AED; /* fallback for old browsers */
background-image: -webkit-linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
background-image: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);

0° points up and 90° to the right — the angle runs clockwise.

Dieses Tool läuft vollständig in Ihrem Browser. Ihre Daten verlassen Ihr Gerät nie — sie werden auf keinen Server hochgeladen.

So verwenden Sie es

  1. 1Stellen Sie zwei bis fünf Farben ein oder starten Sie mit einer Vorlagen-Palette.
  2. 2Wählen Sie den Verlaufstyp und dann Winkel oder Form; Positionen bei Bedarf fixieren.
  3. 3Kopieren Sie den CSS-Block und fügen Sie ihn in Ihr Stylesheet ein.

CSS-Verlauf-Generator

Wählen Sie zwei bis fünf Farben, entscheiden Sie sich für linear, radial oder konisch und ziehen Sie den Winkel — die Vorschau aktualisiert sich beim Tippen, und der CSS-Code ist immer eine Kopie entfernt. Lassen Sie die Position eines Stops leer, wird sie automatisch so gesetzt, wie es CSS täte; exakte Prozentwerte erzeugen harte Kanten und versetzte Verläufe.

Die Ausgabe ist ein echter Produktionsblock: eine Einfarbig-Reserve für sehr alte Browser, eine Zeile mit -webkit- Präfix für alte WebKit-Versionen und zuletzt die Standardsyntax. Der Zufalls-Harmonisieren-Knopf dreht die Farbtöne Ihrer Palette im HSL-Raum, damit jede Neuwürflung ausgewogen bleibt statt zu kneifen.

Häufige Fragen

Warum enthält das CSS eine Zeile mit -webkit- Präfix?

Das ist eine Kompatibilitätszeile für alte WebKit-Browser (etwa Safari-5- bis 6-Ära), die nur -webkit-linear-gradient verstanden. Jeder Browser des letzten Jahrzehnts liest die Standardzeile; Sie können die Präfixzeile also löschen, wenn Sie diese Versionen nicht unterstützen wollen — behalten kostet eine Zeile, wegwerfen kostet nichts.

Was bedeutet der Winkel bei einem linearen Verlauf?

Er ist die Laufrichtung des Verlaufs, im Uhrzeigersinn von oben gemessen: 0deg läuft von unten nach oben, 90deg von links nach rechts, 180deg von oben nach unten. Das Tool normalisiert jeden Winkel (−45 wird 315) und die umgekehrte Richtungsregel der alten Syntax ist in der -webkit--Zeile bereits berücksichtigt.

Verwandte Tools

Alle Werkzeuge-Tools →

Kontrastprüfer

Prüfen Sie das WCAG-Kontrastverhältnis zweier Farben mit AA- und AAA-Bewertung für normalen und großen Text plus Live-Vorschau. Alles läuft lokal in Ihrem Browser.

Alle Tools →

Farbkonverter

Eine Farbe in hex, rgb() oder hsl() einfügen und alle drei Formate plus eine fertige Reihe Tints und Shades für Ihr Designsystem erhalten.

Alle Tools →

Farbwähler

Eine Farbe aus dem Farbfeld wählen oder direkt vom Bildschirm greifen, mit der EyeDropper-API — hex, RGB und HSL in einem Klick kopiert.

Alle Tools →

Bildrahmen

Geben Sie einem Bild oder einem ganzen Stapel einen einfarbigen oder transparenten Rahmen — Live-Vorschau, Ausgabe als PNG oder JPG, komplett in Ihrem Browser.

Alle Tools →

Dieses Tool einbetten

Binden Sie dieses Tool mit einer Zeile in Ihre Website ein — es läuft im Browser des Besuchers.

<iframe src="https://zoyku.com/de/tools/gradient-generator?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — gradient-generator" loading="lazy"></iframe>
100% local processing