CSS Farbverlauf Generator

°

CSS-Ausgabe

 
  
 
Vollständige Regel
 
 
 
 
 
   
 
 
 
So nutzen Sie das Tool
 
     
  1. Verlaufstyp wählen — Linear, Radial oder Konisch.
    2.  
  2. Farben einstellen — Farbfläche anklicken oder HEX/RGB-Werte eingeben. Stops auf dem Verlaufsbalken ziehen.
    3.  
  3. Feintuning — Winkel anpassen, bis zu 5 Farbstops setzen, Alpha-Transparenz regeln.
    4.  
  4. Kopieren & einfügen — "CSS kopieren" drücken und direkt im Stylesheet verwenden.
    5.  
 
 
 
Was ist ein CSS-Farbverlauf?
 
Ein CSS-Farbverlauf erzeugt weiche Farbübergänge direkt im Browser — ganz ohne Bilddateien. Er wird über background oder background-image definiert und bleibt als Vektorgrafik auf jedem Bildschirm scharf.
 
Drei Typen: Linear (gerade Linie), Radial (kreis-/ellipsenförmig), Konisch (Farbrad). Alle funktionieren in modernen Browsern ohne Vendor-Prefixes.
 
 
 
Typische Einsatzszenarien
 
 
Hero-Hintergründe
 
Button-Hover-Effekte
 
Karten mit Tiefe
 
Fortschrittsbalken
 
Bild-Overlays
 
Sektions-Trenner
 
 
Tipps & Best Practices
 
 
 Weniger ist mehr 
2–3 Farbstops wirken am saubersten. Ab 4 Stops wird es schnell unruhig.
 
 
 Winkel macht den Unterschied 
135° oder 150° statt flacher 90° erzeugen einen dynamischeren, natürlicheren Look.
 
 
 Subtil gewinnt 
Ähnliche Farbtöne mit niedrigem Kontrast eignen sich perfekt als Hintergrund ohne vom Inhalt abzulenken.
 
 
 Animation möglich 
Mit background-size und background-position lassen sich fließende Verlaufsanimationen umsetzen.
 
 
 
Häufig gestellte Fragen
 
 
Funktionieren CSS-Verläufe in allen Browsern?
 
Ja. Alle drei Verlaufstypen laufen in Chrome, Firefox, Safari und Edge. Vendor-Prefixes sind nicht mehr nötig.
 
 
 
Kann ich Transparenz im Verlauf nutzen?
 
Ja. Mit dem Alpha-Schieberegler die Deckkraft reduzieren. Ideal für Fade-Effekte und Overlay-Masken auf Bildern.
 
 
 
Was ist der Unterschied zwischen linear und radial?
 
Linear verläuft entlang einer Geraden. Radial breitet sich kreis- oder ellipsenförmig von einem Mittelpunkt nach außen aus.
 
 
 
Wie bekomme ich einen ganzseitigen Verlauf?
 
Verlauf auf body setzen mit min-height: 100vh und background-attachment: fixed für statischen Hintergrund beim Scrollen.
 
 
 
Lässt sich ein Verlauf animieren?
 
Nicht direkt. Aber background-position auf einem übergroßen Verlauf erzeugt Bewegung, und @property (CSS Houdini) ermöglicht echte Stop-Animation.