CSS Mesh Gradient
Erstellen Sie wunderschöne Mesh-Gradient-Hintergründe mit 4 Farbpunkten und einstellbarer Unschärfe. Kopieren Sie das reine CSS und verwenden Sie es in jedem Projekt.
① 4 Farben für jede Ecke wählen ② Unschärfeintensität anpassen ③ CSS kopieren
Farbe oben-links
#C9B89A
Farbe oben-rechts
#7A5C38
Farbe unten-links
#1A3A5C
Farbe unten-rechts
#2A5A3A
Unschärfeintensität (px): 160px
So funktioniert es
Der Mesh-Gradient verwendet vier radial-gradient-Ebenen, jede in einer Ecke verankert. Die Verläufe vermischen sich durch CSS-Transparenz, und die Unschärfeintensität steuert die Ausbreitung jedes Verlaufs.
Unschärfeintensität
Höhere Unschärfewerte lassen die Verläufe weiter ausbreiten und sanfter verschmelzen. Niedrigere Werte halten jede Farbe konzentrierter in ihrer Ecke.
CSS-Ausgabe
Das generierte CSS verwendet background-color als Basis und stapelt mehrere radial-gradient-Definitionen auf background-image. Kein JavaScript oder Canvas erforderlich.
background-color: #c9b89a;
background-image:
radial-gradient(ellipse at 0% 0%, #c9b89a 0%, transparent 160px),
radial-gradient(ellipse at 100% 0%, #7a5c38 0%, transparent 160px),
radial-gradient(ellipse at 0% 100%, #1a3a5c 0%, transparent 160px),
radial-gradient(ellipse at 100% 100%, #2a5a3a 0%, transparent 160px);
Was ist ein Mesh-Gradient?
Ein Mesh-Gradient ist eine flüssige Mehrpunkt-Farbmischung, die flüssige, aurora-ähnliche Hintergründe erzeugt. Im Gegensatz zu einem Standard-Linear- oder Radialverlauf platziert ein Mesh-Gradient mehrere Farbpunkte über die Oberfläche. Die CSS-Implementierung verwendet überlappende radial-gradient-Ebenen, die in jeder Ecke verankert sind — eine leichte, bildfreie Technik.
Häufig gestellte Fragen
Ein Mesh-Gradient ist ein Gradienttyp, der mehrere Farben an verschiedenen Punkten auf einer Fläche vermischt. Das Ergebnis ist ein flüssiges, organisches Farbfeld, das Auroras oder weiche Lichteffekte ähnelt.
Der CSS-Mesh-Gradient verwendet vier radial-gradient-Ebenen — eine in jeder Ecke verankert — die sich nach außen ausbreiten und in Transparenz übergehen. Diese Ebenen sind auf background-image gestapelt.
Ein linearer Verlauf wechselt Farben entlang einer einzelnen Achse. Ein Mesh-Gradient platziert Farbpunkte an beliebigen Positionen und erzeugt so eine flüssige multidirektionale Farbmischung.
Der Unschärfeparameter steuert den Ausbreitungsradius jeder radial-gradient-Ebene. Ein höherer Wert lässt jede Farbe weiter ausbreiten, bevor sie in Transparent übergeht, was längere, weichere Übergänge erzeugt.
Nur-CSS-Mesh-Gradienten sind auf Eckankerpunkte beschränkt. Echte Mesh-Gradienten (wie in Figma oder Illustrator) können Farbpunkte überall auf der Fläche haben.
Kopieren Sie das CSS und wenden Sie es auf jedes HTML-Element an, z.B. einen Hero-Bereich, body oder eine Karte. Die background-color gewährleistet vollständige Abdeckung als Fallback.
Die Funktion radial-gradient wird in allen modernen Browsern (Chrome, Firefox, Safari, Edge) seit 2013 unterstützt.