Welche CSS-Verlaufstypen unterstuetzt dieses Tool?

Linear, radial und conic. Linear nutzt einen Winkel in Grad. Radial waehlt Kreis oder Ellipse plus Position. Conic nutzt einen from-Winkel und eine Position.

Wie funktionieren Farbstops?

Jeder Stop ist eine Hex-Farbe plus optionale Position von 0% bis 100%. Position leer lassen, damit der Browser die Stops gleichmaessig verteilt. Mindestens zwei gueltige Farben noetig.

Soll ich die komplette background-Regel oder nur den Verlauf kopieren?

Nutzen Sie Background kopieren fuer `background: linear-gradient(...);` zum Einfuegen. Nutzen Sie Wert kopieren, wenn Sie nur die Funktion brauchen, z. B. in `background-image` oder einer Custom Property.

Kann ich Transparenz oder 8-stellige Hex nutzen?

Ja. Geben Sie #rrggbbaa ein (oder waehlen Sie eine Vollfarbe und bearbeiten Sie das Hex). Ungueltige Hex-Werte werden uebersprungen bis sie korrigiert sind.

Verlassen meine Eingaben das Geraet?

Nein. Der CSS Verlaufs-Generator laeuft nur in Ihrem Browser. Farben und Einstellungen werden nicht hochgeladen oder auf einem Server gespeichert.

Generator-Tools

CSS Verlaufs-Generator

Erstellen Sie CSS-Verlaeufe fuer Hintergruende, Buttons und Heroes ohne den Browser zu verlassen.

Das Verlaufs-CSS wird in Ihrem Browser erzeugt. Nichts wird hochgeladen.

Verlaufstyp

Winkel (Grad)

0 ist oben, 90 rechts, 180 unten, 270 links.

Farbstops

Farbe fuer Stop 1
Farbe
Position %
Farbe fuer Stop 2
Farbe
Position %

CSS-Ausgabe

background: linear-gradient(135deg, #3b82f6 0%, #ec4899 100%);

linear-gradient(135deg, #3b82f6 0%, #ec4899 100%)

Über CSS Verlaufs-Generator

Erstellen Sie CSS-Verlaeufe fuer Hintergruende, Buttons und Heroes ohne den Browser zu verlassen. Wechseln Sie zwischen linear, radial und conic, setzen Sie Winkel oder Position, fuegen Sie bis zu acht Farbstops hinzu und kopieren Sie eine fertige `background:`-Deklaration oder nur den Verlaufswert. Kombinieren Sie es mit dem HEX zu RGB Umrechner fuer Stop-Farben oder dem CSS Minifier vor dem Deploy. Nichts wird hochgeladen.

So verwenden Sie CSS Verlaufs-Generator

Waehlen Sie linear, radial oder conic.
Stellen Sie Winkel (linear / conic) oder Form und Position (radial / conic) ein.
Bearbeiten Sie Farbstops - Hex und optionales % - oder fuegen Sie mehr hinzu.
Kopieren Sie das Background-CSS oder den Verlaufswert in Ihr Stylesheet. Alles bleibt auf Ihrem Geraet.

Beispiele für CSS Verlaufs-Generator

Diagonaler Markenverlauf

linear-gradient(135deg, #3b82f6 0%, #ec4899 100%) - ueblicher Hero- oder Card-Hintergrund.

Weiches radiales Spotlight

radial-gradient(circle at center, #ffffff 0%, #e2e8f0 100%) fuer eine weiche Vignette oder Modal-Hintergrund.

Conic-Farbrad

conic-gradient(from 0deg at center, #ff0000 0%, #00ff00 50%, #0000ff 100%) fuer Charts und dekorative Ringe.

Linearer Fade mit drei Stops

Fuegen Sie einen Mittel-Stop (z. B. #22c55e bei 50%) zwischen zwei Markenfarben fuer eine reichere Mischung ein.

Häufige Anwendungsfälle

Hero- und Abschnitts-Hintergruende in CSS gestalten
Button- und Badge-Fuellungen mit mehreren Stops bauen
Radiale Spotlights und weiche Vignetten prototypisieren
Conic-Charts oder dekorative Ringe erstellen
Produktionsreife background-Deklarationen kopieren

Häufig gestellte Fragen zu CSS Verlaufs-Generator

Welche CSS-Verlaufstypen unterstuetzt dieses Tool?: Linear, radial und conic. Linear nutzt einen Winkel in Grad. Radial waehlt Kreis oder Ellipse plus Position. Conic nutzt einen from-Winkel und eine Position.
Wie funktionieren Farbstops?: Jeder Stop ist eine Hex-Farbe plus optionale Position von 0% bis 100%. Position leer lassen, damit der Browser die Stops gleichmaessig verteilt. Mindestens zwei gueltige Farben noetig.
Soll ich die komplette background-Regel oder nur den Verlauf kopieren?: Nutzen Sie Background kopieren fuer `background: linear-gradient(...);` zum Einfuegen. Nutzen Sie Wert kopieren, wenn Sie nur die Funktion brauchen, z. B. in `background-image` oder einer Custom Property.
Kann ich Transparenz oder 8-stellige Hex nutzen?: Ja. Geben Sie #rrggbbaa ein (oder waehlen Sie eine Vollfarbe und bearbeiten Sie das Hex). Ungueltige Hex-Werte werden uebersprungen bis sie korrigiert sind.
Verlassen meine Eingaben das Geraet?: Nein. Der CSS Verlaufs-Generator laeuft nur in Ihrem Browser. Farben und Einstellungen werden nicht hochgeladen oder auf einem Server gespeichert.

HEX-zu-RGB-Konverter

Konvertieren Sie HEX zu RGB (und zurück) mit HSL, CMYK, einer Tint-Shade-Rampe, WCAG-Kontrastkarten und einem CSS-Token-Snippet - kostenloser Online-Farbcode-Konverter.

RGB-zu-HSL-Konverter

Wandeln Sie RGB in HSL und HSL in RGB sofort um. Kostenloser Online-Farbkonverter mit Live-Swatch und kopierfertigem rgb()- und hsl()-CSS.

PX zu REM Umrechner

Rechnen Sie px in rem und em online mit konfigurierbarer Basis-Schriftgroesse um. Kostenloser px-zu-rem-Umrechner mit Schnellreferenz. Laeuft im Browser.

CSS-Minifier

Kostenloser Online-CSS-Minifier. Komprimieren und minifizieren Sie CSS durch Entfernen von Kommentaren und Zusammenfassen von Whitespace - kleinere Stylesheets, schnellere Seitenladezeiten. Läuft in Ihrem Browser, kein Upload nötig.