Uskarpe gradienter: myk, ufokusert farge som føles moderne

En uskarp gradient er farge uten kanter: noen få myke former på en bunn, gjort uskarpe til alt som er igjen er lys som glir fra én fargetone til den neste. Den ser ut som et fotografi tatt gjennom frostet glass, eller en linse trukket ut av fokus mot en opplyst by. Den mykheten er grunnen til at den passer velværeapper, musikk, hudpleie, rolig teknologi og bakgrunnsbilder. Metoden er enkel: former først, så mye uskarphet, så korn. Detaljene nedenfor er forskjellen mellom drømmende og utgnidd.

Uskarpe gradienter mot nordlys- og mesh-gradienter

Disse tre blandes sammen fordi alle ser myke ut. De kommer fra ulike ideer, og å velge riktig endrer oppdraget.

Slik lager du en uskarp gradient

1. 1

   Velg en bunn

   En blek, brukket hvit for luftig, et dypt blekk for glødende. Bunnen fyller alle hull formene etterlater.

2. 2

   Velg tre eller fire nabofarger

   Farger nær hverandre på sirkelen, som rosa, syrin og himmelblå, blander seg til rene mellomtoner. Les analoge farger for flere kombinasjoner.

3. 3

   Tegn store, overlappende former

   Tre til fem sirkler eller ovaler, som hver dekker en fjerdedel til halvparten av lerretet. La noen gå ut over kantene.

4. 4

   Gjør det kraftig uskarpt

   Bruk gaussisk uskarphet på omtrent 10 til 20 prosent av lerretets korteste side. På et innlegg som er 1080 piksler bredt, er det rundt 110 til 220 piksler.

5. 5

   Legg til korn

   Et fint støylag på 3 til 6 prosent opasitet skjuler striper og hindrer resultatet i å se plastaktig ut.

6. 6

   Sjekk i telefonstørrelse

   Krymp det. Har en form fortsatt en synlig kant, gjør den mer uskarp eller større.

Fargeoppskrifter for uskarpe gradienter

Hver fargeprøve etterligner det ferdige uttrykket i én enkelt gradient, så du kan kopiere den rett inn i CSS eller bruke fargene som formene dine. Elliptiske radiale gradienter med plassering utenfor midten kommer overraskende nær ekte uskarphet.

Velg familie etter hva som skal ligge oppå. Bleke uskarpe gradienter bærer mørk tekst godt og passer hudpleie, papirvarer, velvære og redaksjonelle forsider. Mørke får lys tekst til å gløde og passer uteliv, musikk og sene arrangementer. En nøytral variant som lin fungerer som en stille bakgrunn for produktbilder, der fargen aldri skal konkurrere med gjenstanden. For flere myke paletter, se drømmende gradienter.

Hvor mye uskarphet en uskarp gradient trenger

De fleste uskarpe gradienter feiler ved å ikke være uskarpe nok. En form gjort uskarp med 30 piksler på et lerret på 1080 piksler er fortsatt en form med myk kant, og den leses som en klatt. Uttrykket krever at uskarpheten er stor nok til at du ikke kan se hvor én form slutter.

En uskarp gradient i CSS

På nettet har du to veier. Lagdelte radiale gradienter som tones ut til gjennomsiktig er billige og tegnes umiddelbart. Ekte uskarpe elementer ser mykere ut og kan drive, men koster mer å tegne. Til en statisk bakgrunn er lag som regel nok.

/* Route 1: layered radial gradients, no filter */
.blurry {
  background-color: #f8fafc;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 25%, #fbcfe8 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 80% 30%, #e9d5ff 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 85%, #bfdbfe 0%, transparent 70%);
}

/* Route 2: real shapes, blurred */
.blurry-live {
  position: relative;
  overflow: hidden;
  background: #f8fafc;
}
.blurry-live .blob {
  position: absolute;
  width: 50vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.8;
}
.blurry-live .blob:nth-child(1) { background: #fbcfe8; left: -10vmax; top: -10vmax; }
.blurry-live .blob:nth-child(2) { background: #e9d5ff; right: -12vmax; top: 0; }
.blurry-live .blob:nth-child(3) { background: #bfdbfe; left: 20%; bottom: -20vmax; }

Trenger du et frostet panel over en uskarp bakgrunn i stedet for selve bakgrunnen, er det backdrop-filter, dekket i backdrop-filter i CSS.

Hvorfor uskarpe gradienter ser billige ut, og løsningen

Striper er det som tar alle, fordi uskarphet skaper lange, milde overganger over mange piksler. Litt korn fikser det; striper i gradienter forklarer hvorfor. Og møtes to av fargene dine i grått, bytt den ene med en nabo, som beskrevet i gjørmete gradienter.

Gradientlys Marks inkluderer myke, diffuse materialer med innebygd korn, og de holder området bak ordene dine rolig, så et uskarpt uttrykk aldri sluker overskriften. Du kan designe gratis med en hvilken som helst ledig Mark i Studioet.