Wissensdatenbank & Anleitung
CSS-Mesh-Verläufe: Räumliche Farbmischung
Mesh-Verläufe sind fließende, multidirektionale Farbmischungen, die sich von herkömmlichen linearen oder radialen Einschränkungen lösen. Sie erstellen organische, moderne Hintergründe, die ein Synonym für Web3- und High-End-SaaS-Landingpages sind.
Das manuelle Generieren massiver CSS-Verläufe ist ein mathematischer Albtraum. Mit diesem visuellen Studio können Sie Koordinatenpunkte lokal über HTML5 Canvas bearbeiten und die komplexen CSS-Zeichenfolgen „radial-gradient“ vollständig clientseitig exportieren.
Formel & Berechnungsmethode
Mesh = Hintergrundbild: radialer Farbverlauf (bei [X] [Y], [Farbe], transparent), ...
CSS-Netzverläufe sind eigentlich eine optische Täuschung, die dadurch entsteht, dass mehrere unterschiedliche „radiale Verlaufs“-Ebenen übereinander gestapelt werden und ihre durchscheinenden Kanten ineinander übergehen.
Best Practices & Tipps
- Farbknoten für Leistung begrenzen: Das Stapeln von 15 radialen Farbverläufen auf einem einzelnen Element zwingt die Browser-GPU dazu, massive Matrixüberlagerungen für jeden Frame zu berechnen. Halten Sie es unter 6 Knoten, um auf Mobilgeräten reibungslos mit 60 Bildern pro Sekunde zu scrollen.
- Verwenden Sie analoge Farben: Ein Netzverlauf sieht schrecklich aus, wenn Sie Komplementärfarben (wie reines Rot und reines Grün) mischen, was zu einer schlammigen braunen Mitte führt. Bleiben Sie bei benachbarten Farben im Farbkreis (z. B. Blau, Lila, Pink).
- Mit CSS-Variablen animieren: Sie können die rohe Eigenschaft „Hintergrundbild“ nicht sauber übergehen. Um einen Netzverlauf zu animieren, binden Sie die X/Y-Koordinaten an benutzerdefinierte CSS-Eigenschaften (Variablen) und animieren Sie diese mithilfe von „@keyframes“.
Häufig gestellte Fragen
Warum sind auf meinem Monitor Farbverlaufsstreifen zu sehen?
Farbstreifen treten auf, wenn den Monitoren die Bittiefe fehlt, um den sanften Übergang zwischen zwei ähnlichen Farben anzuzeigen. Durch das Hinzufügen einer sehr subtilen CSS-Rauschüberlagerung (Körnung) wird die Streifenbildung durch Dithering der Pixel sofort behoben.
Kann ich dies als PNG statt als CSS speichern?
Während reines CSS unbegrenzt skalierbar ist und keine Bandbreite verbraucht, wird dringend empfohlen, einen Screenshot der Leinwand zu erstellen und ihn als optimiertes WEBP-Bild bereitzustellen, wenn der Farbverlauf für mobile GPUs zu komplex ist.
Unterscheidet sich ein Mesh-Verlauf von einem konischen Verlauf?
Ja. Konische Farbverläufe bewegen die Farben um einen zentralen Drehpunkt (wie ein Kreisdiagramm), während Netzverläufe mehrere überlappende radiale Ausbrüche verwenden, um unregelmäßige, organische Kleckse zu erzeugen.