Handytool
EntwicklerKostenlosLäuft lokal

CSS-Gradient-Generator

Baue Linear-, Radial- und Conic-CSS-Gradienten — ziehe Stops, wähle Farben, kopiere das CSS.

Vorschau
CSS
background: linear-gradient(135deg, #B7FF3E 0%, #0a0a0a 100%);
Typ
Voreinstellungen

Füge bis zu sechs Farb-Stops hinzu, verschiebe den Positions-Schieberegler und kopiere das CSS.

Über CSS-Gradient-Generator

Handytool's CSS-Gradient-Generator erstellt Linear-, Radial- und Conic-Gradienten mit bis zu sechs Farb-Stops. Ziehe einen Stop's Position, ändere seine Farbe, wechsle den Gradienten-Typ, und die Live-Vorschau und CSS-Deklaration aktualisieren sich sofort. Starte von einem der eingebauten Presets — Lime Swiss, Sunset, Sky, Aurora — oder gestalte deine eigene von Grund auf.

Funktionen von CSS-Gradient-Generator

  • 01

    Linear, Radial und Conic

    Linear ist der alltägliche Hintergrund-Gradient; Radial ist großartig für Highlights und Vignetten; Conic ist perfekt für Kreisdiagramme, Farbräder und rotierende Hintergründe.

  • 02

    Bis zu sechs Farb-Stops

    Füge Stops hinzu und entferne sie, stelle jeden's Position mit einem Slider ein, und wähle seine Farbe über den System-Farbwähler oder einen Hex-Wert. Stops sortieren sich nach Position automatisch neu.

  • 03

    Kopierbares CSS-Deklaration

    Die Ausgabe ist eine vollständige background: ... Deklaration, die du direkt in ein Stylesheet, eine Styled Component oder eine Tailwind-Arbitrary-Value-Klasse einfügen kannst.

FAQ zu CSS-Gradient-Generator

Was ist der Unterschied zwischen Linear, Radial und Conic?
Linear-Gradienten laufen in einer geraden Linie in einem bestimmten Winkel; Radial-Gradienten breiten sich von einem Zentrum aus; Conic-Gradienten fegen um einen Punkt wie ein Uhrzeiger. Jeder eignet sich für einen anderen optischen Effekt.
Wie viele Farb-Stops sollte ich verwenden?
Zwei Stops ist der klassische zwei-Farb-Gradient. Drei oder vier lassen dich realistische Übergänge erstellen (Sonnenuntergang, Aurora). Mehr als sechs neigt dazu, laut zu wirken — deshalb begrenzt dieser Generator auf sechs.
Kann ich das für Hintergründe in einer Email-Vorlage verwenden?
Die meisten Email-Clients unterstützen immer noch nicht zuverlässig moderne CSS-Gradienten — gib eine solide Fallback-Farbe zusätzlich zum Hintergrund-Gradient an, wenn du das in eine Email-Vorlage kopierst.
Ist die Ausgabe Pixel-genau?
Ja — die Vorschau wird von der nativen Gradient-Engine des Browsers gerendert, also siehst du genau, was dein CSS erzeugt.

Verwandte Werkzeuge

Entwickler →

Weitere Tools entdecken

Alle Werkzeuge →