CSS-Gradient-Generator

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.