CSS mesh-gradient: så bygger du en av radiella lager

En mesh-gradient i CSS är en bakgrund där färg blandas åt flera håll samtidigt, som om pölar av pigment hade sugit in i varandra. CSS har ingen mesh-funktion, och de mesh-gradienter som en gång utkastades för SVG kom aldrig i webbläsarna, så webbversionen är en fejk: tre till fem radial-gradient()-lager staplade över en enfärgad yta, vart och ett tonar ut till transparent. Gjord med omsorg är den nära nog att ingen märker skillnaden, väger några hundra byte och förblir skarp i alla storlekar.

Om du vill ha designteorin först, vad en mesh är och varför den känns organisk, läs mesh-gradienter. Den här guiden handlar om att bygga en i kod.

Så fungerar lagermetoden

Varje lager är en färgpunkt. Dess position är at-värdet, dess räckvidd är toningsavståndet och dess styrka är färgens alfa. Eftersom den första gradienten i background-image målas överst spelar ordningen mindre roll här än du kanske tror: varje lager är mestadels genomskinligt, så de blandas där de överlappar. Bas-background-color syns igenom överallt där ingen pöl når.

.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%);
}

Steg för steg: bygg din egen mesh-gradient i CSS

1. 1

   Välj en botten

   Välj den enfärgade yta som syns mellan pölarna. Mörka bottnar får pölarna att glöda, ljusa bottnar får dem att kännas som akvarell. Bottnen är också din reserv om gradienterna misslyckas.

2. 2

   Välj tre till fem besläktade färger

   Angränsande nyanser blandas rent. Motsatser, som blått och orange, möts i en grå utsmetning. Sladdriga gradienter förklarar varför och hur du undviker det.

3. 3

   Placera pölarna utanför mitten

   Skjut punkterna mot hörn och kanter och låt minst en ligga delvis utanför rutan, som at 110% 0%. Centrerade pölar ser ut som en måltavla.

4. 4

   Variera räckvidd och styrka

   Ge en färg den största toningen och den högsta alfan så att den leder. Håll accenten liten och svagare. Lika stora pölar ser mekaniska ut.

5. 5

   Blanda i ett bättre färgrum

   Lägg till in oklab i varje lager, som i radial-gradient(in oklab circle at 15% 20%, ...), där det stöds. Överlappningarna förblir ljusare än i sRGB.

6. 6

   Avsluta med korn

   Stora mjuka toningar får band på många skärmar. Ett svagt brusöverlägg åtgärdar det och ger en tryckt känsla, se nedan.

Mjukare övergångar med oskärpa

Radiella toningar är mjuka men deras former är tydligt runda. En oskärpa mjukar upp cirklarna till något mer organiskt. Lägg lagren på ett pseudoelement, sudda det och gör det överdimensionerat med en negativ inset så att de suddade kanterna inte tonar ut mot sidan. isolation: isolate håller det negativa z-index inuti komponenten.

.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);
}

Att lägga korn på en mesh-gradient i CSS

Korn gör två saker. Det bryter upp de synliga steg som uppstår i breda toningar med låg kontrast, och det ger ytan den taktila, filmlika kvalitet som får gradienter att se genomtänkta ut snarare än standard. I CSS är den vanliga källan ett SVG-filter med feTurbulence, använt som en liten bakgrundsbild och lagt överst med låg opacitet. Hela tekniken finns i brustextur i CSS, och designresonemanget i kornig gradient.

Att animera en mesh-gradient

Gradientpositioner kan inte animeras var för sig, men registrerade egna egenskaper kan. Deklarera varje rörlig koordinat med @property, använd den inuti gradienten och animera egenskapen. Håll rörelsen långsam och stäng av den för dem som ber om reducerad rörelse.

@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; }
}

Varje bildruta i den här animationen ritar om hela bakgrunden. På ett litet kort är det försumbart, på en helskärmshero är det värt att mäta. Guiden om animerade gradienter tar upp billigare alternativ, som att flytta ett överdimensionerat lager med transform.

När du ska använda en bild eller WebGL i stället

Shaders tas upp i WebGL-gradienter. En mellanväg är att designa bakgrunden en gång som ett levande material och exportera den: Gradiently Marks är meshliknande material med färg, korn, ljus och rörelse, och en design gjord med en exporteras som PNG, JPEG eller en sömlös videoloop på 5 till 30 sekunder.

GR·Y97R·RQ

August Basin

Se den här Marken