Gradienter med støy: jevne farger med kornet overflate

En gradient med støy er en jevn fargeblanding med et fint lag tilfeldig støy oppå, slik at fargen føles trykt fremfor rendret. Blandingen gir fargen og lysretningen; støyen gir en overflate og hindrer blandingen i å brytes opp i bånd. Nedenfor er fem oppskrifter du kan kopiere, fulgt av en enkel forklaring av hver generatorinnstilling, slik at du kan lage din egen.

Fem oppskrifter på gradienter med støy

Hver oppskrift består av en grunngradient og en støyinnstilling. Gradientene vises uten støy her, slik at du kan se fargen. Tabellen under angir støyen du legger oppå. De er bevisst ulike: én mørk, én lys, én varm, én kjølig og én kraftig.

Innstillinger i støygradientgeneratorer forklart

Alle gradientgeneratorer med et støyvalg og alle SVG-støyfiltre bruker en variant av de samme kontrollene. Når du vet hva hver gjør, kan du lese enhver oppskrift og rette ethvert resultat.

Slik lager du en gradient med støy i CSS

Den ryddigste metoden legger et SVG-støybilde over gradienten i én background-deklarasjon og blander dem. Bytt gradienten med en oppskrift over, og sett frekvens og opasitet 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 kontraststerke prikker

For et kraftigere, nesten risografisk uttrykk legger du støy og gradient i samme lag og kjører dem gjennom et kontrastfilter. Støyen presses til harde prikker som følger gradientens lys. Dette er mer fremtredende enn oppskrift 3, så bruk det til plakater og toppbannere fremfor bak 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 */
}

Velge riktig støy til formatet

Støy er relativ til lerretet. Samme filter virker fint på en telefonstory og grovt på et lite banner. Tilpass derfor frekvensen til formatet fremfor å bruke én fil overalt.

• Stories og innlegg: frekvens rundt 0,8, opasitet 8 til 14 prosent. Litt mer enn du tror, siden opplasting mykner den.
• Toppbilder på nettsteder: frekvens 0,7 til 0,9, opasitet 4 til 10 prosent. Se bakgrunner til toppbilder.
• Trykkplakater: grovere korn, frekvens 0,5 til 0,7 i endelig pikselstørrelse, slik at det overlever trykkingen.
• Mørke bakgrunner: Halver den vanlige mengden. Mørke gradientbakgrunner forklarer hvorfor skygger viser korn først.

Støygradient eller kornete gradient

De er samme idé med ulik vektlegging. Folk sier kornete gradient når de mener uttrykket, og støygradient når de mener hvordan den lages. Kornete gradienter dekker hvorfor korn fungerer og hvor det bør plasseres; denne siden er oppskriftsboken. Vil du ha tekstur uten en fargeblanding, start med korntekstur i stedet.

Vil du slippe glidebrytere helt, har hver Mark i Gradiently sin egen korninnstilling sammen med farger, lys og bevegelse. Den rendres på nytt i hver størrelse, så støyen aldri strekkes eller blir uskarp. Design gratis med enhver Mark som ingen har sikret seg.