CSS-Gradient-Generator
CSS-Verläufe mit Live-Vorschau erstellen
Wie man CSS-Gradient-Generator benutzt
CSS-Verläufe mit Live-Vorschau erstellen Kostenloses Online-Tool, ohne Anmeldung, ohne aufdringliche Werbung. Jetzt nutzen.
Wofür werden CSS-Verläufe verwendet?
CSS-Verläufe erzeugen sanfte Farbübergänge direkt im Browser ohne Bilddateien zu laden. Sie sind ein Pfeiler des modernen Web-Designs — ermöglichen visuell reiche Effekte mit null zusätzlichen HTTP-Anfragen und verbessern so die Performance und Core Web Vitals von Google.
- Hero-Bereich-Hintergründe: Vollbreiten-Verlaufshintergründe auf Landing Pages schaffen visuelle Wirkung ohne schwere Bilder. Ein linearer Verlauf von der Primär- zur Sekundärfarbe der Marke etabliert sofort visuelle Identität.
- Button-Styling: Verlaufshintergründe auf Call-to-Action-Buttons fügen Tiefe und visuelles Gewicht hinzu.
background: linear-gradient(135deg, #7B35F5, #C040A0)ist ein Beispiel für einen lebhaften diagonalen Verlauf. - Verlaufstext: Verlaufe auf Text anwenden mit
background-clip: textund-webkit-text-fill-color: transparent— erzeugt visuell auffällige Titel, die auf modernen Websites und SaaS-Landing-Pages weit verbreitet sind. - Überlagerungseffekte: Eine halbtransparente Verlaufsüberlagerung auf einem Bild (von transparent zu Schwarz) verbessert die Lesbarkeit von übergelagertem Text, ohne das Hintergrundbild vollständig zu blockieren.
- Fortschrittsbalken und Datenvisualisierung: Verlaufsfüllungen in Fortschrittsbalken und Diagrammelementen machen Daten visuell ansprechender und moderner.
Verlaufstypen: linear-gradient(richtung, farbe1, farbe2) für gerichtete Verläufe. radial-gradient(form, farbe1, farbe2) für kreisförmige/elliptische Verläufe. conic-gradient(farbe1, farbe2) für Rotationsverläufe im Kuchendiagramm-Stil (CSS4 — von allen modernen Browsern unterstützt).
Frequently Asked Questions
Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?
Lineare Verläufe transitieren Farben entlang einer geraden Linie (von oben nach unten, von links nach rechts oder in einem beliebigen Winkel). Radiale Verläufe strahlen von einem Mittelpunkt nach außen in einem Kreis oder einer Ellipse. Konische Verläufe transitieren um einen Mittelpunkt — wie das Gesicht eines Farbrads oder eines Kuchendiagramms. Jeder erzeugt einen grundlegend anderen visuellen Effekt.
Wie erstellt man einen sich wiederholenden Verlauf?
Verwenden Sie repeating-linear-gradient() oder repeating-radial-gradient(). Geben Sie den Verlauf mit einer definierten Länge an: repeating-linear-gradient(45deg, rot 0px, rot 10px, blau 10px, blau 20px) erstellt diagonale Streifen. Ohne definierte Mustergröße verhalten sich wiederholende Verläufe wie reguläre Verläufe.
Können Verläufe mit CSS animiert werden?
Verläufe selbst können nicht direkt mit CSS transition animiert werden — background-image ist nicht direkt animierbar. Alternativen: background-position mit größerem background-size verwenden, um eine Bewegungsanimation zu erstellen, oder CSS-Custom-Properties (Variablen) für die Farben verwenden und diese Variablen transitieren. Der häufigste Ansatz ist Deckkraft-Fade zwischen zwei Verlaufsebenen.
Was bedeutet der Verlaufswinkel?
Der Winkel in linear-gradient wird im Uhrzeigersinn von oben gemessen. 0deg geht nach oben (von unten nach oben). 90deg geht nach rechts (von links nach rechts). 180deg geht nach unten (von oben nach unten). 45deg geht diagonal nach rechts unten. Sie können auch Richtungs-Keywords verwenden: to top, to bottom, to right, to bottom right, usw.
Wie erstellt man einen Verlauf mit mehreren Farbpunkten?
Fügen Sie mehr durch Komma getrennte Farbwerte hinzu: linear-gradient(135deg, #ff0000 0%, #ff8800 25%, #ffff00 50%, #00ff00 75%, #0000ff 100%). Der Prozentsatz steuert, wo jede Farbe erscheint. Ohne Prozentsätze sind die Punkte gleichmäßig verteilt. Farbpunkte können sich überlappen, um scharfe statt weiche Übergänge zu erzeugen.
CSS-Verläufe vs. SVG-Verläufe vs. Bildverläufe
CSS-Verläufe benötigen keine externen Dateien, skalieren perfekt und sind einfach zu animieren — die erste Wahl für Hintergründe und einfache UI-Effekte. SVG-Verläufe können auf SVG-Formen und -Pfade angewendet werden — flexibler für komplexe Vektorgrafiken. Bildverläufe (PNG, JPG) sind für sehr komplexe Effekte notwendig, die CSS nicht reproduzieren kann. Für Web-Hintergründe und UI-Elemente sind CSS-Verläufe Bildformaten aus Performance-Gründen immer vorzuziehen.