Zum Inhalt springen
FreeKitX

Mesh-Gradient-Generator

Tool als Lesezeichen speichern

Diese Seite im Browser speichern

Auf dem Smartphone im Teilen-Menü oder Browsermenü „Lesezeichen hinzufügen“ wählen.

Erstellen Sie weiche Mesh-Farbverläufe mit Kontrollpunkten, Zufalls-Seeds und 4K-Export direkt im Browser.

Mesh-Gradient- und Fluid-Hintergrund-Generator

Kostenlos · Lokale Verarbeitung

Erstellen Sie weiche Mesh-Farbverläufe mit Kontrollpunkten, Zufalls-Seeds und 4K-Export.

Live-Farbverlaufs-Leinwand
Interaktive Vorschau

Punkte ziehen oder Pfeiltasten / Schieberegler zum Neupositionieren nutzen.

1
2
3
4

Design-Vorlagen

Mesh-Gradient-Steuerung

Passen Sie Seed, Kontrollpunkte, Unschärfe und Hintergrundfarbe in Echtzeit an.

Anzahl Kontrollpunkte: 4 / 6

Mindestens 4 Kontrollpunkte erforderlich.

#2beeb3
#0f172a
50 px
px

Passen Sie die Unschärfeintensität für weichere Übergänge zwischen Farbpunkten an.

Erweiterte Einstellungen

Verwenden Sie einen numerischen Seed, um denselben Verlauf deterministisch zu reproduzieren.

Ausgewählter Punkt: point-1
21 %
%
34 %
%

Exportieren & Herunterladen

CSS-Variante

Standard-Hintergrunddeklarationen ohne Filterunschärfe. Sicher für alle Elemente.

background-color: #0f172a;
background-image:
    radial-gradient(at 21% 34%, #2beeb3 0px, transparent 55%),
    radial-gradient(at 73% 26%, #3c5bf6 0px, transparent 55%),
    radial-gradient(at 37% 67%, #ea62ad 0px, transparent 55%),
    radial-gradient(at 68% 70%, #f6ec60 0px, transparent 55%);

Ähnliche Tools

Direkte Antwort

Ein Mesh-Gradient ist ein moderner visueller Effekt, der mehrere radiale Farbpunkte auf einer zweidimensionalen Ebene überlagert und organische, mehrfarbige Verläufe ohne starre lineare Kanten erzeugt.

So verwenden Sie dieses Tool

1

Farbpunkte positionieren & Presets wählen

Verschieben Sie 4 bis 6 Kontrollpunkte auf der Leinwand oder wählen Sie ein Design-Preset für harmonische Basisfarben.

2

Weichzeichner & PRNG-Seeds anpassen

Justieren Sie den Unschärferadius für sanftere Übergänge oder nutzen Sie numerische Zufalls-Seeds zur exakten Reproduktion.

3

CSS kopieren oder Wallpaper herunterladen

Kopieren Sie schlanke Hintergrund-Deklarationen, nutzen Sie isolierte CSS-Regeln oder exportieren Sie hochauflösende PNGs bis 4K.

CSS-Mesh-Gradient-Implementierung: Nur Hintergrund vs. Vollständiges CSS

Browser-native Mesh-Gradients entstehen durch die Schichtung mehrerer radial-gradient()-Ebenen über einer einfarbigen Basisfarbe. Der Modus «Nur Hintergrund» liefert reine Hintergrunddeklarationen ohne Element-Filter und ist für jeden HTML-Container sicher. Der Modus «Vollständiges CSS» wendet den Blur-Filter auf ein isoliertes ::before-Pseudoelement mit vergrößerter Ausdehnung an, sodass enthaltene Texte, Links und Schaltflächen gestochen scharf und voll klickbar bleiben.

background-image: radial-gradient(at x1 y1, c1, transparent r1), radial-gradient(at x2 y2, c2, transparent r2);
  • Nur Hintergrund: Leichtgewichtige geschichtete Radialverläufe ohne Filterunschärfe; sicher für alle HTML-Elemente.
  • Vollständiges CSS: Isoliertes ::before-Pseudoelement mit Blur-Filter; Kindelemente bleiben scharf und interaktiv.
  • Deterministischer Seed: Der Mulberry32-PRNG-Algorithmus reproduziert exakt identische Farbverteilungen und Koordinaten.

Häufige Fragen

Wie funktionieren reine CSS-Mesh-Gradients ohne Bilddateien?

Sie kombinieren mehrere CSS radial-gradient()-Deklarationen mit transparenten Farbstopps über einer Grundfarbe. Die Rendering-Engine des Browsers interpoliert die transparenten Schnittmengen flüssig zu organischen Verläufen.

Was ist der Unterschied zwischen den Modi «Nur Hintergrund» und «Vollständiges CSS»?

«Nur Hintergrund» erzeugt Standard-CSS-Eigenschaften ohne Filterunschärfe, was für alle Container risikofrei ist. «Vollständiges CSS» kapselt den Weichzeichner in einem Pseudoelement ab, was tiefere Farbverläufe erlaubt, ohne dass Text oder Buttons verschwimmen.

Welche Leistungsaspekte und Browser-Einschränkungen sind zu beachten?

Viele gestapelte Radialverläufe mit starkem Blur-Filter können beim schnellen Scrollen auf leistungsschwachen Mobilgeräten die GPU-Auslastung erhöhen. Zudem erfolgt der 4K-PNG-Export lokal im Canvas und benötigt auf älteren Geräten einen kurzen Berechnungsmoment.

Werden Farbverläufe oder Wallpaper auf einen Server hochgeladen?

Nein. Alle Berechnungen, Seed-Auswertungen, CSS-Generierungen und Canvas-Rasterisierungen finden vollständig lokal in Ihrem Browser statt.

Maßgebliche Referenzen & Standards