CSS-Generator

CSS-Gradienten-Galerie

Erstellen Sie ein hochwertiges Set von Verläufen aus Ihren Farben, vergleichen Sie verschiedene Richtungen und Stile und kopieren Sie genau das CSS, das Sie für Hintergründe, Hero-Blöcke oder Benutzeroberflächen benötigen.

  • Generieren Sie lineare, radiale und konische Variationen aus einem Eingabesatz.
  • Kopieren Sie vollständige CSS-Deklarationen oder reine Verlaufsfunktionen mit einem Klick.
  • Validieren Sie Stopp-Positionen und Farbangaben vor dem Export.
  • Nutzen Sie Vorlagen, wenn Sie schnell einen Ausgangspunkt benötigen.

Erstellen Sie Ihr Verlaufs-Set

Wählen Sie einen Basistyp, definieren Sie bis zu vier Farbstopps und generieren Sie dann eine Galerie nützlicher Variationen. Leere zusätzliche Stopps werden sicher ignoriert.

Wird für lineare und konische Verläufe verwendet. Werte werden auf 0 bis 360 Grad begrenzt.
Farbstopps
Verwenden Sie Hex-Farben. Stopp-Positionen werden auf ganze Prozentwerte gerundet und müssen in aufsteigender Reihenfolge bleiben.

Die Kopierfunktion nutzt das Format background: ...;. Vorschaukarten zeigen zudem die reine Verlaufsfunktion an.

Das hervorgehobene Ergebnis spiegelt Ihren gewählten Primärtyp wider. Die untenstehenden Galeriekarten zeigen alternative Richtungen und Stile mit denselben Daten.

6 Galerie-Variationen
Ganze % Stopp-Rundung

Die Darstellung kann zwischen Browsern leicht variieren, und große konische Verläufe können auf manchen Displays Streifenbildung zeigen. Exportierte Stopp-Positionen werden auf 0 bis 100 begrenzt und auf ganze Prozentwerte gerundet.

Vergleichen Sie die generierten Variationen nebeneinander und kopieren Sie die Version, die am besten zu Ihrem Layout passt, anstatt die Stopps manuell neu zu bauen.

So funktioniert es

Der Generator nimmt Ihre aktiven Farbstopps, bereinigt jeden Wert und erstellt einen Basis-Verlaufsstring. Daraus wird eine Galerie verwandter Winkel, radialer Platzierungen und konischer Rotationen erstellt, damit Sie Alternativen prüfen können, ohne die Palette zu ändern.

Es werden nur gültige Hex-Farben verwendet. Leere optionale Farben werden übersprungen. Stopp-Positionen werden nur sortiert, wenn die Daten bereits gültig sind; falls ein Stopp rückwärts verläuft, weist die Seite auf das Problem hin, anstatt Ihre Eingabe stillschweigend zu ändern. So bleibt das exportierte CSS konsistent mit Ihren Eingaben.

Kopieraktionen versuchen zuerst die Clipboard-API und nutzen bei Bedarf ein temporäres Textfeld als Rückfalloption. Falls das Kopieren nicht möglich ist, bleibt das CSS in einem wählbaren Codeblock sichtbar.