Støjgradienter: blød farve med en kornet finish

En støjgradient er en blød farveblanding med et fint lag tilfældig støj lagt ovenpå, så farven føles trykt frem for renderet. Blandingen giver dig farven og lysets retning; støjen giver dig en overflade og forhindrer blandingen i at bryde op i bånd. Nedenfor finder du fem opskrifter at kopiere og derefter en ligefrem forklaring på hver generatorindstilling, så du kan lave dine egne.

Fem opskrifter på støjgradienter

Hver opskrift er en basisgradient og en støjindstilling. Gradienterne vises her uden støj, så du kan se farven; tabellen nedenfor angiver den støj, der skal lægges ovenpå. De er bevidst forskellige: én mørk, én lys, én varm, én kølig, én kraftig.

Indstillingerne i en støjgradient-generator forklaret

Alle gradientgeneratorer med en støjfunktion og alle SVG-støjfiltre bruger en udgave af de samme kontroller. Når du ved, hvad hver af dem gør, kan du læse enhver opskrift og rette ethvert resultat.

Sådan laver du en støjgradient i CSS

Den reneste metode lægger et SVG-støjbillede over din gradient i én background-erklæring og blander dem. Skift gradienten ud med en af opskrifterne ovenfor, og sæt frekvens og opacitet ud fra tabellen.

.noise-gradient {
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%);
}

.noise-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Recipe 1: frequency 0.85, 3 octaves */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.08;
}

Metoden med kraftige prikker

Vil du have et kraftigere, næsten risografisk udtryk, så læg støjen og gradienten i samme lag, og skub dem gennem et kontrastfilter. Støjen bliver knust til hårde prikker, der følger gradientens lys. Det er mere højrøstet end opskrift 3, så brug det til plakater og herobannere, ikke bag brødtekst.

.speckle {
  background:
    linear-gradient(160deg, #ff7a3d 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  filter: contrast(170%) brightness(1000%);
  mix-blend-mode: multiply; /* over a coloured parent, e.g. #5b2a86 */
}

Vælg den rigtige støj til formatet

Støj er relativ til lærredet. Det samme filter virker fint på en story på telefonen og groft på et lille banner, så skalér frekvensen til formatet i stedet for at genbruge én fil overalt.

• Stories og opslag: frekvens omkring 0,8, opacitet 8 til 14 procent. Lidt mere, end du tror, fordi uploads blødgør den.
• Heroes på websites: frekvens 0,7 til 0,9, opacitet 4 til 10 procent. Se herobaggrunde til websites.
• Plakater til tryk: grovere korn, frekvens 0,5 til 0,7 i den endelige pixelstørrelse, så det overlever trykpressen.
• Mørke baggrunde: halvér din sædvanlige mængde. Mørke gradientbaggrunde forklarer, hvorfor skygger viser korn først.

Støjgradient eller kornet gradient

Det er den samme idé med forskellig vægt. Folk siger kornet gradient, når de mener udtrykket, og støjgradient, når de mener, hvordan den er lavet. Kornede gradienter handler om, hvorfor korn virker, og hvor du skal placere det; denne side er opskriftsbogen. Vil du have tekstur uden en farveblanding, så start i stedet med kornet tekstur.

Vil du helst slippe for at justere skydere overhovedet, har hver Gradiently Mark sin egen kornindstilling ved siden af farver, lys og bevægelse, gengivet på ny i hver størrelse, så støjen aldrig strækkes eller sløres. Design gratis med enhver Mark, som ingen har sikret sig.