Farben auswählen
Lege zwei Grundfarben fest. Optional kannst du eine dritte Akzentfarbe hinzufügen.
Gradienten-Generator
GRADIENT DESIGN TOOL
Gradienten erstellen. Mit Wärme, Tiefe & Glanz.
Erstelle individuelle Farbverläufe für Webseiten, Banner, Buttons und Grafiken. Wähle deine Farben, passe Verlaufstyp, Winkel und Farbstopps an und kopiere anschließend den fertigen CSS-Code.
3 Verlaufstypen
3 Farben
Live-Vorschau
CSS Export
SO FUNKTIONIERT'S
In sechs Schritten zum eigenen Farbverlauf
Der Generator ist auch für Einsteiger gedacht. Wähle deine Farben, entscheide dich für einen Verlaufstyp und passe das Ergebnis so lange an, bis es zu deinem Projekt passt.
Verlaufstyp wählen
Entscheide dich zwischen Linear, Radial oder Conic.
Richtung einstellen
Bei linearen und konischen Verläufen bestimmst du den Winkel von 0 bis 360°.
Farbstopps anpassen
Verschiebe die Positionen der Farben und verändere damit die Wirkung des Verlaufs.
Live prüfen
Die große Vorschau zeigt jede Änderung sofort in einem echten Designbeispiel.
CSS kopieren
Den fertigen CSS-Code kannst du mit einem Klick direkt in dein Projekt übernehmen.
◒
Linear, Radial oder Conic?
Die drei Verlaufstypen erzeugen sehr unterschiedliche Wirkungen.
LINEAR
Gerader Verlauf
Ideal für Hintergründe, Buttons und große Flächen.
RADIAL
Verlauf vom Mittelpunkt
Gut geeignet für Glow, Licht und räumliche Effekte.
CONIC
Kreisförmiger Verlauf
Ideal für Farbräder, Highlights und besondere Effekte.
GRADIENT GENERATOR
Deinen Verlauf zusammenstellen
Alle Änderungen werden sofort in der Live-Vorschau und im CSS-Code übernommen.
01
Einstellungen
Farben und Verlauf bestimmen.
FARBE 01
Startfarbe
FARBE 02
Hauptfarbe
FARBE 03
Akzentfarbe
135°
0%
52%
100%
02
Live-Vorschau
So wirkt dein Gradient im Einsatz.
GOLDEN DESIGN
Golden Flow. Dein Gradient.
Warme Farben, räumliche Tiefe und ein moderner Look für Webseiten, Banner oder besondere Designflächen.
CSS OUTPUT
Fertiger Code
background: linear-gradient(135deg, #F7C65A 0%, #E27A22 52%, #8F4518 100%);
LIVE APPLICATIONS
So wirkt dein Gradient
Dein aktueller Verlauf wird auch in diesen typischen Design-Elementen live dargestellt.
BUTTON
Ideal für Call-to-Action-Buttons und wichtige Aktionen.
DESIGN CARD
◇
CREATIVE DESIGN
Moderner
Gradient Farbe · Tiefe · Wirkung
Gradient Farbe · Tiefe · Wirkung
BANNER
DESIGNS COMMUNITY
Dein Projekt.
Deine Farben.
Deine Farben.
GRADIENT INSPIRATION
Fertige Presets ausprobieren
Ein Klick übernimmt Farben, Verlaufstyp und Einstellungen direkt in den Generator.
GOLD
Sunset Gold
Warmes Gold trifft auf kräftiges Orange und tiefes Kupfer.
AMBER
Amber Glow
Leuchtender Bernstein mit warmem Gold und dunkler Tiefe.
COPPER
Copper Stone
Kupfer, Bronze und dunkle Erdtöne mit mineralischem Charakter.
FIRE
Golden Fire
Intensives Orange mit goldenem Licht und dunklem Feuerkern.
METAL
Molten Gold
Flüssiges Gold mit metallischem Wechsel aus Licht und Schatten.
MINERAL
Desert Mineral
Sand, Terrakotta und Bronze für einen natürlichen Mineral-Look.
Nicht zu viele Farben
Zwei oder drei gut abgestimmte Farben wirken häufig hochwertiger als ein überladener Verlauf.
Farbstopps nutzen
Mit unterschiedlichen Positionen kannst du Glanz, Tiefe und besondere Lichtbereiche erzeugen.
Kontrast beachten
Soll Text auf dem Gradient liegen, achte darauf, dass er über dem gesamten Verlauf gut lesbar bleibt.
DEIN GRADIENT. DEIN DESIGN.
Verlauf gefunden?
Kopiere den fertigen CSS-Code und verwende deinen Gradient direkt für deine Webseite, dein Forum oder dein nächstes Designprojekt.
Kopiert ✓