Slørede gradienter: blød fokusfarve, der føles moderne

En sløret gradient er farve uden kanter: nogle få bløde former på en bund, sløret, til der kun er lys tilbage, der driver fra en farvetone over i den næste. Den ligner et fotografi taget gennem matteret glas eller et objektiv trukket ud af fokus på en oplyst by. Den blødhed er grunden til, at den passer til wellnessapps, musik, hudpleje, rolig teknologi og baggrunde. Metoden er enkel: former først, derefter masser af sløring, derefter korn. Detaljerne nedenfor er forskellen på drømmende og udtværet.

Slørede gradienter versus nordlys- og mesh-gradienter

De tre bliver blandet sammen, fordi de alle ser bløde ud. De kommer fra forskellige idéer, og valget af den rigtige ændrer opgaven.

Sådan laver du en sløret gradient

1. 1

   Vælg en bund

   En lys off-white til luftigt, et dybt blæk til glødende. Bunden fylder alle huller, formerne efterlader.

2. 2

   Vælg tre eller fire nabofarver

   Farver tæt på hinanden på hjulet, som pink, lilla og himmelblå, blander sig til rene mellemtoner. Læs analoge farver for flere kombinationer.

3. 3

   Tegn store, overlappende former

   Tre til fem cirkler eller ovaler, der hver dækker en fjerdedel til halvdelen af lærredet. Lad nogle løbe ud over kanterne.

4. 4

   Slør kraftigt

   Anvend en gaussisk sløring på cirka 10 til 20 procent af lærredets korteste side. På et opslag, der er 1080 pixel bredt, er det omkring 110 til 220 pixel.

5. 5

   Tilføj korn

   Et fint støjlag ved 3 til 6 procent uigennemsigtighed skjuler striber og forhindrer, at resultatet ligner plastik.

6. 6

   Tjek i telefonstørrelse

   Gør det mindre. Hvis en form stadig har en synlig kant, så slør mere eller gør formen større.

Farveopskrifter til slørede gradienter

Hver farveprøve tilnærmer det færdige udtryk i én gradient, så du kan kopiere den direkte ind i CSS eller bruge farverne som dine former. Elliptiske radiale gradienter med forskudte positioner kommer overraskende tæt på en ægte sløring.

Vælg familien efter det, der sidder ovenpå. Lyse slørede bærer mørk skrift godt og passer til hudpleje, papirvarer, wellness og redaktionelle forsider. Mørke slørede får lys skrift til at gløde og passer til natteliv, musik og sene events. En neutral sløring som hør fungerer som en rolig baggrund til produktfotos, hvor farven aldrig må konkurrere med genstanden. Flere bløde paletter finder du i drømmende gradienter.

Hvor meget sløring en sløret gradient har brug for

De fleste slørede gradienter fejler ved ikke at være slørede nok. En form sløret med 30 pixel på et lærred på 1080 pixel er stadig en form med en blød kant, som læses som en klat. Udtrykket kræver, at sløringen er stor nok til, at du ikke kan se, hvor én form slutter.

En sløret gradient i CSS

På nettet har du to veje. Lagdelte radiale gradienter, der toner ud til gennemsigtig, er billige og gengives med det samme. Ægte slørede elementer ser blødere ud og kan drive, men koster mere at tegne. Til en statisk baggrund 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; }

Hvis du har brug for et matteret panel over en sløret baggrund frem for selve baggrunden, er det backdrop-filter, som er dækket i CSS backdrop filter.

Hvorfor slørede gradienter ser billige ud, og løsningen

Striber er den, der får alle, fordi en sløring skaber lange, bløde overgange over mange pixel. Lidt korn løser det; gradient banding forklarer hvorfor. Og hvis to af dine farver mødes i grå, så byt den ene ud med en nabo, som beskrevet i mudrede gradienter.

Gradiently Marks inkluderer bløde, diffuse materialer med indbygget korn, og de holder området bag dine ord roligt, så et sløret udtryk aldrig sluger overskriften. Du kan designe gratis i Studio med enhver Mark, der ikke er sikret.