Mesh-Gradient-Generator

Der Mesh-Gradient-Generator kombiniert vier radiale Farbflecken mit einer Grundfarbe zu einem weichen, mehrfarbigen Hintergrund. Stellen Sie Farben, Positionen und Ausdehnung ein und exportieren Sie CSS, Tailwind-Klassen, SVG oder PNG. Optional können Sie die Flecken mit einer Dauer von 6 bis 30 Sekunden animieren. Alles läuft in Ihrem Browser.

Nur lokal

AnimierenAnimiert den Verlauf mit sanften Bewegungen. Die Einstellung für reduzierte Bewegung wird berücksichtigt.

Vorlagen

Wählen Sie eine Vorlage, um alle Regler auf einmal zu setzen, und passen Sie sie dann an.

Hintergrundfarbe

Radius0px

Farben

Fleck 1

Position 1 horizontal18%Position 1 vertikal22%Weichheit58%

Fleck 2

Position 2 horizontal74%Position 2 vertikal30%Weichheit52%

Fleck 3

Position 3 horizontal42%Position 3 vertikal78%Weichheit60%

Fleck 4

Position 4 horizontal88%Position 4 vertikal82%Weichheit45%

Tipp: Ziehen Sie die nummerierten Griffe in der Vorschau, um jeden Fleck zu verschieben. Pfeiltasten stupsen an, Umschalt beschleunigt.

Eine Vorlage setzt alle Regler mit einem Klick; Zufall tut dasselbe mit zufälligen Werten.

CSS

.mesh {
  background-color: #070b1a;
  background-image:
    radial-gradient(ellipse 45% 45% at 88% 82%, #0ea5e9 0%, rgb(14 165 233 / 0.55) 70%, rgb(14 165 233 / 0) 100%),
    radial-gradient(ellipse 60% 60% at 42% 78%, #a855f7 0%, rgb(168 85 247 / 0.55) 70%, rgb(168 85 247 / 0) 100%),
    radial-gradient(ellipse 52% 52% at 74% 30%, #22d3a5 0%, rgb(34 211 165 / 0.55) 70%, rgb(34 211 165 / 0) 100%),
    radial-gradient(ellipse 58% 58% at 18% 22%, #5b8cff 0%, rgb(91 140 255 / 0.55) 70%, rgb(91 140 255 / 0) 100%);
  border-radius: 0px;
}

Das CSS besteht aus gestapelten radialen Verläufen: einer je Fleck, jeder nach transparent auslaufend, darunter die Hintergrundfarbe. Deshalb gibt es keine sichtbaren Kanten – die Flecken werden nicht vermischt, sondern gestapelt.

Tailwind-Klassen

bg-[#070b1a] rounded-[0px] bg-[image:radial-gradient(ellipse_45%_45%_at_88%_82%,_#0ea5e9_0%,_rgb(14_165_233_/_0.55)_70%,_rgb(14_165_233_/_0)_100%),_radial-gradient(ellipse_60%_60%_at_42%_78%,_#a855f7_0%,_rgb(168_85_247_/_0.55)_70%,_rgb(168_85_247_/_0)_100%),_radial-gradient(ellipse_52%_52%_at_74%_30%,_#22d3a5_0%,_rgb(34_211_165_/_0.55)_70%,_rgb(34_211_165_/_0)_100%),_radial-gradient(ellipse_58%_58%_at_18%_22%,_#5b8cff_0%,_rgb(91_140_255_/_0.55)_70%,_rgb(91_140_255_/_0)_100%)]

Beliebige Werte, damit jede Zahl exakt ist – keine davon wird auf die nächste Skalenstufe gerundet.

Wie funktioniert Mesh-Gradient-Generator?

Jeder Farbfleck ist ein elliptischer radialer Verlauf über einer gemeinsamen Grundfarbe. Seine Position wird in Prozent angegeben; seine horizontalen und vertikalen Radien beziehen sich auf die Breite und Höhe des Elements. Der vierte Fleck liegt vor den anderen, damit SVG-Vorschau und CSS dieselbe Ebenenreihenfolge verwenden.

Die Flecken blenden von ihrer Farbe auf dieselben RGB-Werte mit Alpha 0 aus. Die sichtbare Mischung entsteht durch die Überlagerung der halbtransparenten Ebenen und der Grundfarbe. Auch standardkonforme CSS-Verläufe mit dem Schlüsselwort `transparent` interpolieren mit vormultipliziertem Alpha; das Schlüsselwort erzeugt nicht grundsätzlich graue Ränder.

Für die optionale Animation registriert das CSS numerische Variablen mit `@property` und bewegt damit die Mittelpunkte. Das SVG animiert die Verschiebung der Farbebenen. Beide Ausgaben berücksichtigen `prefers-reduced-motion`; der PNG-Download zeigt ein statisches Bild der Ausgangsposition.

Große animierte Verläufe können auf mobilen Geräten zusätzliche Rechenleistung benötigen. Prüfen Sie das Ergebnis auf den Zielgeräten und verwenden Sie bei Bedarf eine kleinere Fläche oder den statischen Export. Text muss auch vor den hellsten Stellen und während der Bewegung ausreichend Kontrast haben.

Verlaufseinstellungen

Hintergrundfarbe #070b1a
Fleck 1 #5b8cff · 18%, 22% · 58%
Fleck 2 #22d3a5 · 74%, 30% · 52%
Fleck 3 #a855f7 · 42%, 78% · 60%
Fleck 4 #0ea5e9 · 88%, 82% · 45%

Erzeugtes CSS

.mesh {
  background-color: #070b1a;
  background-image:
    radial-gradient(ellipse 45% 45% at 88% 82%,
      #0ea5e9 0%, rgb(14 165 233 / 0.55) 70%, rgb(14 165 233 / 0) 100%),
    radial-gradient(ellipse 60% 60% at 42% 78%,
      #a855f7 0%, rgb(168 85 247 / 0.55) 70%, rgb(168 85 247 / 0) 100%),
    radial-gradient(ellipse 52% 52% at 74% 30%,
      #22d3a5 0%, rgb(34 211 165 / 0.55) 70%, rgb(34 211 165 / 0) 100%),
    radial-gradient(ellipse 58% 58% at 18% 22%,
      #5b8cff 0%, rgb(91 140 255 / 0.55) 70%, rgb(91 140 255 / 0) 100%);
}

Welche Optionen und Sonderfälle unterstützt Mesh-Gradient-Generator?

Technische Referenz und Optionen
Parameter	Typ	Standard	Verhalten & Sonderfälle
Position des Farbflecks	0–100 %	—	Legt den Mittelpunkt relativ zur Breite und Höhe des Elements fest. 18 % / 22 % liegt links oben.
Ausdehnung	Prozent	58 %	Legt die elliptischen Radien fest: horizontal als Anteil der Breite, vertikal als Anteil der Höhe. Am äußeren Rand ist der Fleck vollständig transparent.
Grundfarbe	Hex-Farbe	#070b1a	Ist dort sichtbar, wo die Farbflecken transparent sind. Sie beeinflusst auch die Mischung der überlappenden Ebenen.
Transparenter Farbstopp	rgb() mit Alpha 0	automatisch	Verwendet die RGB-Kanäle des Farbflecks mit Alpha 0. Die darüber und darunter liegenden Farben bestimmen die sichtbare Mischung.
Ebenenreihenfolge	von hinten nach vorn	Fleck 4 im Vordergrund	SVG und CSS zeigen den vierten Fleck vor dem dritten, zweiten und ersten. Im CSS wird deshalb die Verlaufsliste umgekehrt ausgegeben.
border-radius	px	0	Rundet die Ecken des Hintergrunds. Bei 0 bleibt die Fläche rechteckig.

Häufig gestellte Fragen

Wie erstelle ich einen Mesh-Gradient mit CSS?

Stapeln Sie mehrere `radial-gradient()`-Ebenen über einer `background-color`. Jeder Verlauf erhält eine Farbe, einen Mittelpunkt und einen transparenten äußeren Stopp. Die erste Ebene der CSS-Liste wird vorne gezeichnet. Dieses Tool berechnet die vier Ebenen und ihre elliptische Ausdehnung für Sie.

Warum wirkt mein Mesh-Gradient zwischen den Farben grau?

Die Grundfarbe und überlappende halbtransparente Flecken können eine gedämpfte Mischung erzeugen. Ändern Sie die Grundfarbe, die Positionen oder die Ausdehnung der Flecken. Die Ausgabe verwendet die jeweilige Farbe mit Alpha 0 am äußeren Stopp; auch standardkonformes CSS behandelt `transparent` mit vormultipliziertem Alpha.

Kann ich den Mesh-Gradient animieren?

Ja. Aktivieren Sie die Animation und wählen Sie eine Dauer von 6 bis 30 Sekunden. Das CSS verwendet `@property` und Keyframes, das SVG bewegt seine Farbebenen. Für den animierten Tailwind-Export benötigen Sie zusätzlich den erzeugten CSS-Block. Bei `prefers-reduced-motion: reduce` bleibt die Ausgabe statisch; PNG enthält ebenfalls ein Standbild.

Beeinflusst ein Mesh-Gradient die Leistung?

Große Flächen und laufende Animationen können zusätzliche Zeichenarbeit verursachen. Die Kosten hängen von Browser, Gerät und Seitengestaltung ab. Prüfen Sie die Zielgeräte; eine kleinere Fläche oder ein statischer SVG- oder PNG-Export kann die Belastung reduzieren.

Eignet sich ein Mesh-Gradient als Hintergrund für Text?

Prüfen Sie den Kontrast an allen Stellen hinter dem Text, bei einer Animation auch während der Bewegung. Eine ausreichend deckende Textfläche oder dunklere Farbflecken erleichtern die Lesbarkeit. Ein Preset allein garantiert keinen ausreichenden Kontrast.

Was unterscheidet einen Mesh-Gradient von einem linearen Verlauf?

Ein linearer Verlauf ändert die Farbe entlang einer Achse. Dieser Mesh-Gradient kombiniert mehrere radiale Farbflecken mit unterschiedlichen Mittelpunkten und erzeugt dadurch Farbwechsel in zwei Dimensionen.

ToolsByUs-Team · Wie wir unsere Tools prüfen