Wie Sie CSS-Verläufe erstellen

CSS-Verläufe ermöglichen es, weiche Farbübergänge ohne Bilddateien zu erstellen. Sie sind leichter als Bilder, skalieren perfekt auf jede Bildschirmgröße und lassen sich einfach anpassen.

Arten von CSS-Verläufen

Linearer Verlauf — Farben gehen in einer geraden Linie ineinander über (oben nach unten, links nach rechts oder in beliebigem Winkel).

background: linear-gradient(135deg, #667eea, #764ba2);

Radialer Verlauf — Farben strahlen von einem Mittelpunkt nach außen, kreis- oder ellipsenförmig.

background: radial-gradient(circle, #667eea, #764ba2);

Konischer Verlauf — Farben drehen sich um einen Mittelpunkt, wie ein Farbkreis.

background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);

So erstellen Sie Verläufe visuell

1. Verlaufstyp wählen — wählen Sie linear oder radial und stellen Sie Winkel oder Position ein.
2. Farbpunkte hinzufügen — klicken Sie, um an verschiedenen Positionen entlang des Verlaufs Farben zu ergänzen. Passen Sie jede Farbe und ihre Position an.
3. CSS kopieren — kopieren Sie den erzeugten Code und fügen Sie ihn in Ihr Stylesheet ein.

Ein visueller Generator ist schneller, als Verlaufssyntax von Hand zu schreiben — besonders, wenn Sie mit mehreren Farbpunkten experimentieren.

Übliche Verlaufsmuster

Hintergrund einer Hero-Sektion — ein dezenter Zwei-Farb-Verlauf bringt Tiefe, ohne vom Text abzulenken.

background: linear-gradient(135deg, #0f172a, #1e3a5f);

Schaltflächen-Highlight — ein leichter Verlauf lässt Schaltflächen dreidimensional wirken.

background: linear-gradient(180deg, #3b82f6, #2563eb);

Overlay über Bildern — ein Verlaufs-Overlay verbessert die Lesbarkeit von Text auf Fotos.

background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));

Akzent-Rahmen — verwenden Sie einen Verlauf als Rahmen, um optisches Interesse zu erzeugen.

border-image: linear-gradient(90deg, #667eea, #764ba2) 1;

Tipps

• Bleiben Sie dezent — die besten Verläufe fallen kaum auf. Eine leichte Verschiebung zwischen zwei ähnlichen Farben bringt Tiefe. Auffällige Regenbogenverläufe wirken selten professionell.
• Verläufe statt Bilder — ein CSS-Verlauf lädt sofort, ohne Netzwerkanfrage. Ersetzen Sie dekorative Hintergrundbilder nach Möglichkeit durch Verläufe.
• Im Dunkelmodus testen — Verläufe, die auf hellem Hintergrund toll aussehen, können im Dunkelmodus auswaschen oder beißen. Definieren Sie ggf. unterschiedliche Verläufe pro Theme.
• Auf Textkontrast achten — wenn Sie Text auf einem Verlauf platzieren, prüfen Sie, dass er über die gesamte Verlaufsbreite lesbar bleibt, nicht nur am hellsten oder dunkelsten Punkt.