Mesh gradient: vad det är och hur du gör en

En mesh gradient är en gradient byggd av flera färgpunkter utspridda över en yta, där var och en blandas med sina grannar åt alla håll samtidigt. En linjär gradient rör sig längs en linje och en radiell sprider sig från en mittpunkt. En mesh har ingen enskild bana, så färgen samlas, driver och överlappar som ljus genom vatten. Därför känns mesh gradienter organiska, och därför har de blivit standardlooken för hero-sektioner, bakgrundsbilder och skivomslag.

Den här guiden förklarar hur en mesh fungerar, hur du gör en i CSS och i designprogram, och hur du undviker de grå fläckarna och ränderna som får så många att se billiga ut. För de andra formerna, se typer av gradienter.

Vad som gör en gradient till en mesh

I ett äkta gradientnät, som det i Adobe Illustrator, delas ytan in i ett rutnät. Varje punkt i rutnätet har en färg, och programmet blandar mjukt mellan angränsande punkter och böjer nätet för att styra färgen. Fria gradienter släpper rutnätet och låter dig sätta färgpunkter var som helst. Mesh gradienter för webb och sociala medier tar oftast en tredje väg: mjuka färgklumpar lagda över en bas och blandade med varandra.

Alla tre delar en idé. Varje pixels färg är en blandning av de närliggande färgpunkterna, vägd efter hur nära de ligger. Flytta en punkt så ändras bara dess omgivning, och det är det som gör att en mesh känns handgjord snarare än uträknad.

Därför känns mesh gradienter organiska

Den vandrande karaktären är också faran. Utan struktur kan en mesh se ut som en slumpmässig suddighet. De bra har en komposition: ett ljust område där ögat landar först, ett mörkare område som ger tyngd och ett lugnt område där text kan ligga.

Så gör du en mesh gradient i CSS

1. 1

   Välj en basfärg

   Välj en mörk eller ljus botten. Den syns där färgpölarna tonar ut, så den avgör den övergripande stämningen.

2. 2

   Placera tre till fem färgpölar

   Varje pöl är en radial-gradient centrerad med at x% y% som tonar ut till transparent. Lägg dem nära hörn och kanter i stället för i mitten.

3. 3

   Låt dem överlappa

   Tona ut varje pöl mellan 45 % och 60 % av vägen så att grannarna möts. I överlappningarna får meshen sin rikedom.

4. 4

   Lämna en lugn zon

   Låt ett område vara mest basfärg, oftast där din rubrik ska ligga. Se text på en gradient.

5. 5

   Lägg till korn

   Ett lätt brusskikt döljer ränder och ger djup. Kornig gradient visar koden.

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(at 12% 18%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 88% 12%, #0ea5e9 0px, transparent 50%),
    radial-gradient(at 80% 88%, #14b8a6 0px, transparent 55%),
    radial-gradient(at 20% 92%, #f472b6 0px, transparent 45%);
}

Eftersom pölarna är procentvärden skalas meshen om med sin ruta. På mycket olika format, som en hög story och en bred banner, justerar du at-positionerna så att det ljusa området fortfarande hamnar där du vill. Samma palett kan animeras långsamt genom att flytta positionerna, och animerad gradientbakgrund visar hur du gör det utan att skada prestandan.

Göra en mesh gradient i designprogram

I program med en riktig mesh eller fri gradient placerar du färgpunkterna direkt och drar i dem tills kompositionen fungerar. I program utan en fungerar suddmetoden överallt: rita tre till fem mjuka former i dina färger på en basrektangel, sudda dem kraftigt, ofta med en fjärdedel av ytans bredd eller mer, och låt dem överlappa. Lägg sedan ett kornskikt överst och exportera i slutstorlek i stället för att skala upp.

Misstag med mesh gradienter och hur du rättar dem

En mesh blir aldrig bättre än sin palett. Om du är osäker på vilka färger som blandas rent kan du börja med en familj av analoga färger och lägga till en kontrasterande accent i en enda pöl.

GR·FVZ6·KW

Thin Dune

Se den här Marken

Vill du hellre beskriva en mesh än bygga en gör Forge nya Marks från en mening eller reglage för reglage, med upp till åtta färger och tre staplade material.