Farbverläufe

200 schöne CSS-Gradienten — auf eine Karte klicken und Code kopieren.

So nutzen Sie das Tool

  1. Filtern — Kategorie wählen, um die Galerie einzugrenzen.
  2. Klicken zum Kopieren — Auf eine Karte klicken, um die vollständige CSS-Background-Eigenschaft zu kopieren.
  3. Einfügen — Direkt ins Stylesheet: background: linear-gradient(...);
  4. Anpassen — Mit dem CSS Farbverlauf Generator Farben, Winkel und Stops anpassen.

Was sind CSS-Gradienten?

CSS-Gradienten erzeugen sanfte Farbübergänge ohne Bilddateien. Sie werden mit linear-gradient(), radial-gradient() oder conic-gradient() definiert.

Alle Gradienten hier verwenden linear-gradient(135deg, ...) — eine diagonale Richtung, die für Hero-Hintergründe, Karten und UI-Akzente hervorragend geeignet ist.

Typische Einsatzszenarien

Hero-Bereiche
Button-Hintergründe
Karten-Header
Seitenhintergründe
Navigationsleisten
Abschnittsteiler
Textfüllungen
Icon-Hintergründe

Tipps & Best Practices

Kontrast prüfen

Text auf Gradienten immer mit dem Kontrast-Prüfer testen. Der dunkelste Teil bestimmt den Mindestkontrast.

Gradient-Text

Gradienten auf Text anwenden: background-clip: text; -webkit-background-clip: text; color: transparent;

Winkel ändern

Diese verwenden 135deg. 90deg für oben-nach-unten oder 45deg für schärfere Diagonale ausprobieren.

Gradienten animieren

Gradienten lassen sich nicht direkt übergehen — stattdessen background-position auf einem übergroßen Gradient-Hintergrund animieren.

Häufig gestellte Fragen

Kann ich diese Gradienten kostenlos nutzen?

Ja. Alle Gradienten hier sind CSS-Code, den Sie lokal generieren — es gelten keine Lizenzbedingungen.

Wie wende ich einen Gradienten auf die gesamte Seite an?

Auf body setzen: body { min-height: 100vh; background: linear-gradient(...); }

Wie verwende ich einen Gradienten als Textfüllung?

Text in ein Span wickeln: background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

Was ist der Unterschied zwischen linearen und radialen Gradienten?

Lineare Gradienten fließen in einer geraden Linie. Radiale Gradienten strahlen von einem Mittelpunkt nach außen in einem Kreis oder einer Ellipse. radial-gradient(circle, ...) für Spotlight-Effekte verwenden.