CSS-Mesh-Verlauf: so baust du ihn aus radialen Ebenen

Ein CSS-Mesh-Verlauf ist ein Hintergrund, in dem Farbe in mehrere Richtungen zugleich überblendet, als wären Farbtümpel ineinander gesickert. CSS hat keine Mesh-Funktion, und die einst für SVG entworfenen Mesh-Verläufe haben es nie in Browser geschafft, also ist die Webversion eine Nachahmung: drei bis fünf radial-gradient()-Ebenen, gestapelt über einer einfarbigen Fläche, jede zu transparent ausblendend. Sorgfältig gemacht, kommt es nah genug heran, dass es niemand merkt, wiegt ein paar hundert Bytes und bleibt bei jeder Größe scharf.

Willst du zuerst die Designtheorie, was ein Mesh ist und warum es organisch wirkt, lies Mesh-Verläufe. Dieser Leitfaden handelt vom Bauen im Code.

So funktioniert die Schichtmethode

Jede Ebene ist ein Farbpunkt. Ihre Position ist der at-Wert, ihre Reichweite die Ausblendstrecke und ihre Stärke das Alpha der Farbe. Weil der erste Verlauf in background-image oben gezeichnet wird, spielt die Reihenfolge hier weniger eine Rolle, als du denkst: Jede Ebene ist überwiegend transparent, sie mischen sich also dort, wo sie sich überlappen. Die Basis-background-color scheint überall durch, wo kein Tümpel hinreicht.

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(circle at 15% 20%, rgb(124 58 237 / 0.85), transparent 55%),
    radial-gradient(circle at 85% 25%, rgb(236 72 153 / 0.75), transparent 50%),
    radial-gradient(ellipse at 60% 90%, rgb(6 182 212 / 0.7), transparent 60%),
    radial-gradient(circle at 25% 80%, rgb(245 158 11 / 0.55), transparent 45%);
}

Schritt für Schritt: deinen eigenen CSS-Mesh-Verlauf bauen

1. 1

   Wähle einen Grund

   Wähle die einfarbige Fläche, die zwischen den Tümpeln sichtbar ist. Dunkle Gründe lassen Tümpel leuchten; helle lassen sie wie Aquarell wirken. Der Grund ist auch dein Fallback, falls die Verläufe versagen.

2. 2

   Wähle drei bis fünf verwandte Farben

   Benachbarte Farbtöne mischen sich sauber. Gegenfarben wie Blau und Orange treffen sich in einem grauen Fleck. Warum und wie du das vermeidest, erklärt Trübe Farbverläufe.

3. 3

   Setze die Tümpel außermittig

   Schiebe Punkte zu Ecken und Rändern und lass mindestens einen teilweise außerhalb der Box sitzen, etwa at 110% 0%. Zentrierte Tümpel wirken wie eine Zielscheibe.

4. 4

   Variiere Reichweite und Stärke

   Gib einer Farbe die größte Ausblendung und das höchste Alpha, damit sie führt. Halte den Akzent klein und schwächer. Gleiche Tümpel wirken mechanisch.

5. 5

   Mische in einem besseren Farbraum

   Füge jeder Ebene in oklab hinzu, wie in radial-gradient(in oklab circle at 15% 20%, ...), wo unterstützt. Überlappungen bleiben heller als in sRGB.

6. 6

   Vollende mit Körnung

   Große weiche Übergänge zeigen auf vielen Bildschirmen Banding. Eine zarte Rauschüberlagerung behebt das und fügt eine gedruckte Anmutung hinzu; siehe unten.

Weichere Mischungen mit Unschärfe

Radiale Übergänge sind glatt, aber ihre Formen sind offensichtlich rund. Eine Unschärfe macht aus den Kreisen etwas Organischeres. Lege die Ebenen auf ein Pseudoelement, zeichne es weich und mache es mit einem negativen inset übergroß, damit die unscharfen Ränder nicht in die Seite ausblenden. isolation: isolate hält den negativen z-index innerhalb der Komponente.

.mesh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0b1026;
}

.mesh::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -1;
  background-image:
    radial-gradient(circle at 20% 25%, #7c3aed, transparent 40%),
    radial-gradient(circle at 80% 30%, #ec4899, transparent 35%),
    radial-gradient(circle at 55% 85%, #06b6d4, transparent 40%);
  filter: blur(48px);
}

Körnung zu einem CSS-Mesh-Verlauf hinzufügen

Körnung erfüllt zwei Aufgaben. Sie bricht die sichtbaren Stufen auf, die in breiten, kontrastarmen Übergängen erscheinen, und gibt der Fläche die greifbare, filmartige Qualität, die Verläufe durchdacht statt standardmäßig wirken lässt. In CSS ist die übliche Quelle ein SVG-feTurbulence-Filter als winziges Hintergrundbild, mit geringer Deckkraft darübergelegt. Die vollständige Technik steht in CSS-Rauschtextur, die gestalterische Begründung in Farbverläufe mit Körnung.

Einen Mesh-Verlauf animieren

Verlaufspositionen lassen sich nicht von allein animieren, registrierte benutzerdefinierte Eigenschaften aber schon. Deklariere jede bewegliche Koordinate mit @property, nutze sie im Verlauf und animiere die Eigenschaft. Halte die Bewegung langsam und schalte sie für Menschen ab, die reduzierte Bewegung anfordern.

@property --x1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 15%;
}

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(circle at var(--x1) 20%, rgb(124 58 237 / 0.85), transparent 55%),
    radial-gradient(ellipse at 60% 90%, rgb(6 182 212 / 0.7), transparent 60%);
  animation: drift 20s ease-in-out infinite alternate;
}

@keyframes drift {
  to { --x1: 55%; }
}

@media (prefers-reduced-motion: reduce) {
  .mesh { animation: none; }
}

Jeder Frame dieser Animation zeichnet den ganzen Hintergrund neu. Auf einer kleinen Karte ist das trivial; bei einem bildschirmfüllenden Hero lohnt sich das Messen. Der Leitfaden zu animierten Farbverläufen behandelt günstigere Alternativen wie das Bewegen einer übergroßen Ebene mit transform.

Wann du stattdessen ein Bild oder WebGL nutzt

Shader behandelt WebGL-Farbverläufe. Ein Mittelweg ist, den Hintergrund einmal als lebendiges Material zu gestalten und zu exportieren: Die Marks von Gradiently sind mesh-artige Materialien mit Farbe, Körnung, Licht und Bewegung, und ein damit gemachtes Design lässt sich als PNG, JPEG oder als nahtlose Videoschleife von 5 bis 30 Sekunden exportieren.

GR·Y97R·RQ

August Basin

Diesen Mark ansehen