CSS mesh gradient: sådan bygger du en af radiale lag

En CSS mesh gradient er en baggrund, hvor farve blandes i flere retninger på én gang, som om pøle af pigment var sivet ind i hinanden. CSS har ingen mesh-funktion, og de mesh-gradienter, der engang blev udkastet til SVG, kom aldrig i browserne, så webversionen er en efterligning: tre til fem radial-gradient()-lag stablet oven på en flad farve, hver falmende til transparent. Gjort omhyggeligt er den tæt nok på til, at ingen kan se forskel, vejer nogle hundrede bytes og forbliver skarp i enhver størrelse.

Vil du have designteorien først, altså hvad en mesh er, og hvorfor den føles organisk, så læs mesh-gradienter. Denne guide handler om at bygge en i kode.

Sådan virker lagmetoden

Hvert lag er ét farvepunkt. Dets position er at-værdien, dets rækkevidde er falmeafstanden, og dets styrke er farvens alfa. Fordi den første gradient i background-image males øverst, betyder rækkefølgen mindre, end du måske tror: hvert lag er for det meste gennemsigtigt, så de blandes, hvor de overlapper. Basens background-color skinner igennem, hvor ingen pøl når hen.

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

Trin for trin: byg din egen CSS mesh gradient

1. 1

   Vælg en baggrund

   Vælg den flade farve, der viser sig mellem pølerne. Mørke baggrunde får pøle til at gløde, lyse får dem til at ligne akvarel. Baggrunden er også din reserve, hvis gradienterne svigter.

2. 2

   Vælg tre til fem beslægtede farver

   Nabofarvetoner blandes rent. Modsætninger, som blå og orange, mødes i et gråt udtværet område. Mudrede gradienter forklarer hvorfor, og hvordan du undgår det.

3. 3

   Placér pølerne skævt

   Skub punkterne mod hjørner og kanter, og lad mindst ét ligge delvis uden for boksen, som at 110% 0%. Centrerede pøle ligner en skydeskive.

4. 4

   Variér rækkevidde og styrke

   Giv én farve den største falmning og den højeste alfa, så den fører. Hold accenten lille og svagere. Lige store pøle ser mekaniske ud.

5. 5

   Bland i et bedre farverum

   Tilføj in oklab til hvert lag, som i radial-gradient(in oklab circle at 15% 20%, ...), hvor det understøttes. Overlapninger forbliver lysere end i sRGB.

6. 6

   Afslut med korn

   Store bløde falmninger får bånd på mange skærme. Et svagt støjlag retter det og tilføjer en trykt fornemmelse. Se nedenfor.

Blødere blandinger med sløring

Radiale falmninger er bløde, men deres former er tydeligt runde. En sløring blødgør cirklerne til noget mere organisk. Læg lagene på et pseudoelement, slør det, og gør det for stort med en negativ inset, så de slørede kanter ikke falmer ind i siden. isolation: isolate holder den negative z-index inde i 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);
}

Sådan tilføjer du korn til en CSS mesh gradient

Korn gør to ting. Det bryder de synlige trin op, der opstår i brede fades med lav kontrast, og det giver fladen den taktile, filmagtige kvalitet, der får gradienter til at se overvejede ud frem for standard. I CSS er den sædvanlige kilde et SVG-feTurbulence-filter brugt som et lille baggrundsbillede, lagt øverst med lav opacity. Hele teknikken står i CSS-støjtekstur, og designbegrundelsen i kornede gradienter.

Animér en mesh gradient

Gradientpositioner kan ikke animeres alene, men registrerede brugerdefinerede egenskaber kan. Deklarér hver bevægelig koordinat med @property, brug den inde i gradienten, og animér egenskaben. Hold bevægelsen langsom, og slå den fra for folk, der beder om reduceret bevægelse.

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

Hver frame i denne animation gentegner hele baggrunden. På et lille kort er det trivielt. På en helskærmshero er det værd at måle. Guiden om animeret gradient dækker billigere alternativer som at flytte et overstort lag med transform.

Hvornår du skal bruge et billede eller WebGL i stedet

Shadere dækkes i WebGL-gradienter. En mellemvej er at designe baggrunden én gang som et levende materiale og eksportere den: Marks i Gradiently er mesh-lignende materialer med farve, korn, lys og bevægelse, og et design lavet med ét eksporteres som PNG, JPEG eller en sømløs videoløkke på 5 til 30 sekunder.

GR·Y97R·RQ

August Basin

Se denne Mark