Überblick Mesh-Verlauf
Mehrschichtige Radialverläufe mit CSS- und SVG-Export
Verwendung
Gestalten Sie weiche Mesh-Verläufe mit mehreren Punkten und exportieren Sie sie als CSS oder SVG für Ihre Oberfläche.
Mesh-Verlauf
Vier gestapelte Radialverläufe über einer Basisfarbe. Vorschau und CSS aktualisieren sich gemeinsam.
Was ein Mesh-Verlauf ist
Mehrere Radialverläufe liegen über einer Basisfarbe. Jede Farbe blendet an ihrer Position zu Transparenz aus und erzeugt weiche, organische Übergänge ohne eine einzige sichtbare Richtung.
Da die Ebenen unabhängig sind, lässt sich ein Zentrum verschieben, ohne den Rest der Komposition zu ändern.
CSS- und SVG-Ausgabe
Die CSS-Version nutzt background-image mit vier radial-gradient-Ebenen und läuft in modernen Browsern. Die SVG-Version ist eine einzelne portable Datei für Designwerkzeuge und Druck.
Häufige Fragen
Warum vier Farben?
Vier Zentren geben Hero-Bereichen und Karten genug Tiefe, ohne trüb zu wirken. Weitere Ebenen lassen sich im exportierten Code ergänzen.
Wie bleibt Text lesbar?
Text auf eine ruhige Fläche setzen, eine halbtransparente Platte ergänzen und den Kontrast mit dem WCAG-Werkzeug prüfen.
Wird das überall unterstützt?
Geschichtete Radialverläufe in CSS sind weit verbreitet. Sehr alte Browser zeigen eventuell nur die Basisfarbe.