CSS-Verlauf erstellen (linear, radial, konisch)
Lernen Sie, schöne CSS-Verläufe zu entwerfen und zu codieren. Inklusive kostenlosem visuellen Generator.
Warum CSS-Verläufe verwenden?
CSS-Verläufe (Gradients) ermöglichen sanfte Farbübergänge ohne Bilddateien. Sie eignen sich perfekt für Hintergründe, Buttons, Karten und Hero-Sektionen. Da Verläufe im Browser aus Code erzeugt werden, skalieren sie auf jede Auflösung, haben kein Download-Gewicht und lassen sich sofort anpassen. Die zwei Haupttypen sind lineare Verläufe (gerader Farbfluss) und radiale Verläufe (kreisförmiger Fluss), ergänzt durch konische Verläufe (um einen Mittelpunkt geschwungen).
Ein gut gewählter Verlauf kann ein flaches Design aufwerten, eine Stimmung erzeugen oder den Blick auf einen Call-to-Action lenken. Der Schlüssel liegt in einem starken Farbpaar, der passenden Richtung und den richtigen Farbstopps.
Häufige Anwendungsfälle
- Hero-Sektionen: Aufmerksamkeitsstarke Hintergründe für Landingpages
- Buttons: Subtile Verläufe lassen CTAs klickbarer wirken
- Karten und Panels: Hintergrundebene ohne Bilder
- Ladezustände: Sanfte Shimmer-Effekte für Platzhalter
- Borders und Text: Neuere CSS-Versionen erlauben Verläufe auf Text- und Rahmenkonturen
Methode 1: Den kostenlosen CSS-Gradient-Generator von UtilBoxx verwenden (Empfohlen)
Unser CSS-Gradient-Generator lässt Sie Farben wählen, Stopps einstellen, die Richtung festlegen und produktionsreifes CSS kopieren. So verwenden Sie ihn:
- Gehen Sie zu utilboxx.com/de/tools/color/gradient
- Wählen Sie zwei oder mehr Farben mit den Farbwählern
- Passen Sie Stopps, Winkel und Form (linear, radial, konisch) an
- Sehen Sie das Ergebnis live in der Vorschau
- Klicken Sie auf „CSS kopieren", um den Snippet zu holen
Warum diese Methode funktioniert:
- Live-Vorschau ohne Neuladen
- Exportiert sauberes, mit Vendor-Prefixes versehenes CSS
- Unterstützt lineare, radiale und konische Verläufe
- Verläufe per URL speicher- und teilbar
- Mobil bedienbar mit touchfreundlichen Steuerelementen
Methode 2: CSS von Hand schreiben
Ein linearer Verlauf in CSS sieht so aus:
```css background: linear-gradient(135deg, #ff7e5f, #feb47b); ```
Für einen radialen Verlauf:
```css background: radial-gradient(circle at center, #6a11cb, #2575fc); ```
Für einen konischen Verlauf (ideal für Tortendiagramm-Effekte):
```css background: conic-gradient(from 180deg, red, yellow, lime, cyan, blue, magenta, red); ```
Sie können beliebig viele Farbstopps und Prozente zur Steuerung der Mischung einsetzen.
Methode 3: Vorgefertigte Verlaufsbibliothek nutzen
Seiten wie uiGradients, Grabient und ColorHub bieten kuratierte Sammlungen schöner Verläufe. Sie stöbern, kopieren das CSS und fügen es in Ihr Projekt ein. Das ist die schnellste Option, wenn Sie kein individuelles Design brauchen.
Häufig gestellte Fragen
Was ist der Unterschied zwischen linear, radial und konisch?
Linear fließt in einer geraden Linie; radial strahlt von einem Mittelpunkt aus; konisch umrundet die Farben kreisförmig wie ein Farbrad. Jede Variante erzeugt einen anderen visuellen Effekt.
Beeinträchtigen CSS-Verläufe die Performance?
Nein. Verläufe werden vom Kompositor des Browsers berechnet und sind zur Laufzeit praktisch kostenlos. Sie sind leichter als Hintergrundbilder und skalieren auf jede Auflösung.
Kann ich Verläufe auf Borders und Text anwenden?
Ja. Mit `border-image: linear-gradient(...)` für Borders und `background-clip: text; color: transparent;` für Textfüllungen können Sie Verläufe nahezu überall einsetzen.
Wie mache ich einen Verlauf barrierearm?
Achten Sie auf ausreichenden Kontrast zum darüberliegenden Text. Verwenden Sie einen Kontrastprüfer und bieten Sie gegebenenfalls eine Vollfarb-Fallback-Lösung für Nutzer mit reduzierter Bewegung oder hohem Kontrast an.
Fazit
CSS-Verläufe sind ein leistungsfähiges, schlankes Designwerkzeug. Für einen schnellen, visuellen Workflow ist der CSS-Gradient-Generator von UtilBoxx die einfachste Möglichkeit, produktionsreife Verläufe zu entwerfen und zu kopieren.