Brusgradienter: len färg med korniga ytor

En brusgradient är en len färgblandning med ett fint lager slumpmässigt brus lagt över, så att färgen känns tryckt snarare än renderad. Blandningen ger dig färgen och ljusets riktning, bruset ger dig en yta och hindrar blandningen från att brytas upp i band. Nedan finns fem recept du kan kopiera, och sedan en enkel förklaring av varje generatorinställning så att du kan göra dina egna.

Fem recept för brusgradienter

Varje recept är en basgradient och en brusinställning. Gradienterna visas här utan brus så att du ser färgen, och tabellen nedan anger bruset som läggs ovanpå. De är avsiktligt olika varandra: en mörk, en ljus, en varm, en kall och en djärv.

Inställningarna i en brusgradientgenerator förklarade

Varje gradientgenerator med brusalternativ, och varje SVG-brusfilter, använder någon version av samma reglage. När du vet vad var och ett gör kan du läsa vilket recept som helst och rätta till vilket resultat som helst.

Så gör du en brusgradient i CSS

Den renaste metoden lägger en SVG-brusbild över din gradient i en enda background-deklaration och blandar dem sedan. Byt ut gradienten mot vilket recept ovan som helst och ställ in frekvens och opacitet från 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 högkontrastprickar

För ett djärvare, nästan risografiskt utseende lägger du bruset och gradienten i samma lager och kör dem genom ett kontrastfilter. Bruset krossas till hårda prickar som följer gradientens ljus. Det är högljuddare än recept 3, så använd det till affischer och hjältebanners, inte bakom brödtext.

.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älj rätt brus för formatet

Brus är relativt till ytan. Samma filter läses som fint på en telefonstory och grovt på en liten banner, så skala frekvensen efter formatet i stället för att återanvända en fil överallt.

• Stories och inlägg: frekvens runt 0,8, opacitet 8 till 14 procent. Lite mer än du tror, eftersom uppladdningar mjukar upp det.
• Webbplatshjältar: frekvens 0,7 till 0,9, opacitet 4 till 10 procent. Se bakgrunder för webbplatshjältar.
• Affischer för tryck: grövre korn, frekvens 0,5 till 0,7 i slutlig pixelstorlek, så att det överlever tryckpressen.
• Mörka bakgrunder: halvera din vanliga mängd. Mörka gradientbakgrunder förklarar varför skuggor visar korn först.

Brusgradient eller kornig gradient

De är samma idé med olika betoning. Man säger kornig gradient när man menar utseendet och brusgradient när man menar hur den görs. Korniga gradienter tar upp varför korn fungerar och var du placerar det, den här sidan är receptboken. Vill du ha textur utan färgblandning, börja med korntextur i stället.

Vill du slippa justera reglage alls bär varje Mark i Gradiently sin egen kornsetting vid sidan av färger, ljus och rörelse, renderad på nytt i varje storlek så att brus aldrig sträcks eller suddas ut. Designa med vilken oclaimad Mark som helst, gratis.