The team behind OnlineTools4Free — building free, private browser tools.
Published Feb 4, 2026 · 6 min read · Reviewed by OnlineTools4Free
CSS-Farbverlaeufe: Typen, Syntax und Design-Trends
Entwicklungvon OnlineTools4Free Team4. Februar 20266 Min. Lesezeit
Die drei Typen von CSS-Farbverlaeufen
- linear-gradient: Farbuebergang entlang einer geraden Linie. Am haeufigsten und vielseitigsten.
- radial-gradient: Kreisfoermiger oder elliptischer Uebergang von einem Mittelpunkt aus.
- conic-gradient: Winkelfoermiger Uebergang um einen Mittelpunkt. Nuetzlich fuer Kreisdiagramme.
Syntax des linearen Verlaufs
background: linear-gradient(Richtung, Farbe1 Position1, Farbe2 Position2);
- Richtung: Ein Winkel (
45deg) oder Schluesselwort (to right). - Farben: Mindestens zwei, ohne Obergrenze.
- Positionen: In Prozent oder Pixeln. Optional aber nuetzlich.
Fortgeschrittene Techniken
- Mehrere Verlaeufe: Ueberlagern Sie mehrere Verlaeufe mit Transparenzen.
- Text-Verlaeufe: Mit
background-clip: textanwenden. - Verlauf-Raender: Mit
border-imageerstellen.
Aktuelle Design-Trends
- Subtile Verlaeufe: Sanfte Uebergaenge zwischen aehnlichen Toenen.
- Mesh-Verlaeufe: Kombination mehrerer radialer Verlaeufe fuer organische Hintergruende.
- Monochrome Verlaeufe: Ein Farbton mit Helligkeitsvariationen.
Verlaeufe erstellen
Unser CSS-Farbverlauf-Generator ermoeglicht visuelles Erstellen und direktes Kopieren des CSS-Codes.
CSS Gradient Generator
Create beautiful CSS gradients with a visual editor. Linear, radial, and conic gradients.
#css#farbverlaeufe#gradients#webdesign#frontend
OT
OnlineTools4Free Team
The OnlineTools4Free Team
We are a small team of developers and designers building free, privacy-first browser tools. Every tool on this platform runs entirely in your browser — your files never leave your device.