Mesh-gradienter: hva de er og hvordan du lager en

En mesh-gradient er en gradient bygget av flere fargepunkter spredt over en flate, der hvert punkt blandes inn i naboene i alle retninger samtidig. En lineær gradient beveger seg langs én linje, og en radial gradient brer seg ut fra ett sentrum. En mesh har ingen enkelt bane, så fargen samler seg, driver og overlapper som lys gjennom vann. Derfor virker mesh-gradienter organiske, og derfor er de blitt standarduttrykket for toppseksjoner, bakgrunnsbilder og albumomslag.

Denne guiden forklarer hvordan en mesh fungerer, hvordan du lager en i CSS og i designverktøy, og hvordan du unngår de grå flekkene og stripene som får så mange av dem til å se billige ut. For de andre formene, se typer gradienter.

Hva som gjør en gradient til en mesh

I en ekte gradient mesh, som den i Adobe Illustrator, er flaten delt inn i et rutenett. Hvert punkt i rutenettet har en farge, og programmet blander jevnt mellom nabopunktene og bøyer rutenettet for å styre fargen. Frihåndsgradienter dropper rutenettet og lar deg plassere fargepunkter hvor som helst. Mesh-gradienter på nettet og i sosiale medier tar vanligvis en tredje vei: myke fargeflekker lagt over en bunn og blandet sammen.

Alle tre deler én idé. Fargen i hver piksel er en blanding av fargepunktene i nærheten, vektet etter hvor nær de er. Flytter du ett punkt, endres bare nabolaget rundt, og det er dette som lar en mesh føles håndlaget fremfor utregnet.

Hvorfor mesh-gradienter virker organiske

Den vandrende kvaliteten er også faren. Uten struktur kan en mesh se ut som en tilfeldig uskarphet. De gode har en komposisjon: et lyst område der øyet lander først, et mørkere område som gir tyngde, og et rolig område der ordene kan stå.

Slik lager du en mesh-gradient i CSS

1. 1

   Sett en grunnfarge

   Velg en mørk eller lys bunn. Den synes overalt der fargefeltene toner ut, så den bestemmer helhetsstemningen.

2. 2

   Plasser tre til fem fargefelt

   Hvert felt er en radial-gradient sentrert i en posisjon med at x% y%, som toner ut til transparent. Legg dem nær hjørner og kanter, ikke i midten.

3. 3

   La dem overlappe

   Ton hvert felt ut et sted mellom 45% og 60% av veien, så naboene møtes. Overlappene er der meshen får rikdommen sin.

4. 4

   La en rolig sone stå

   Hold ett område stort sett i grunnfargen, vanligvis der overskriften skal stå. Se tekst på gradient.

5. 5

   Legg til korn

   Et lett støylag skjuler striper og gir dybde. Kornete gradienter viser 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%);
}

Fordi feltene er angitt i prosent, skalerer meshen med boksen sin. På svært ulike former, som en høy story og et bredt banner, justerer du at-posisjonene så det lyse området fortsatt havner der du vil ha det. Den samme paletten kan animeres sakte ved å flytte disse posisjonene. Animerte gradientbakgrunner viser hvordan du gjør det uten at det går ut over ytelsen.

Lag en mesh-gradient i designverktøy

I verktøy med en ekte mesh eller frihåndsgradient plasserer du fargepunktene direkte og drar i dem til komposisjonen sitter. I verktøy uten fungerer uskarphetsmetoden overalt: tegn tre til fem myke former i fargene dine på et grunnrektangel, gjør dem kraftig uskarpe, ofte med en firedel av lerretets bredde eller mer, og la dem overlappe. Legg så et kornlag øverst, og eksporter i endelig størrelse i stedet for å skalere opp.

Feil i mesh-gradienter og hvordan du retter dem

En mesh er aldri bedre enn paletten sin. Er du usikker på hvilke farger som blandes rent, starter du med en familie av analoge farger og legger til én kontrasterende aksent i ett enkelt felt.

GR·FVZ6·KW

Thin Dune

Se denne Marken

Vil du heller beskrive en mesh enn å bygge en, lager Forge nye Marker fra en setning eller kontroll for kontroll, med opptil åtte farger og tre stablede materialer.