Brustextur i CSS: lägg korn på gradienter med SVG

En brustextur i CSS är ett fint, slumpmässigt stänk som läggs över en färg eller gradient för att ge den korn. CSS har ingen brusfunktion, så den vanliga källan är SVG: filtret feTurbulence genererar brus, du lägger det i en liten SVG, bäddar in den som en data-URI och kaklar den över din gradient med låg styrka. Resultatet ser ut som filmkorn eller tryckt papper, och det åtgärdar i det tysta banding, de synliga trappstegen som uppstår i stora, mjuka gradienter.

Varför korn får färg att se dyrare ut tas upp i kornig gradient. Den här guiden är genomförandet.

SVG-filtret för brus

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch" />
    <feColorMatrix type="saturate" values="0" />
  </filter>
  <rect width="100%" height="100%" filter="url(#n)" />
</svg>

Att bädda in brus som en data-URI

En separat fil fungerar, men inbäddning sparar en förfrågan och håller effekten på ett ställe. I en data-URI måste tecken som betyder något i URL:er kodas: < blir %3C, > blir %3E, # blir %23 och % blir %25. Använd enkla citattecken inuti SVG så att de inte krockar med de dubbla runt URL:en.

:root {
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' 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");
}

Att lägga brus i lager över en gradient

Lägg bruset på ett pseudoelement ovanför gradienten och styr det sedan med två rattar: ett blandläge, som avgör hur det grå kornet blandas med färgen under, och opacitet, som avgör hur starkt det är. soft-light håller färgerna rena och är det mildaste, overlay ger mer kontrast. pointer-events: none hindrar lagret från att blockera klick.

.grain {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6);
}

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  mix-blend-mode: soft-light;
  opacity: 0.45;
  pointer-events: none;
}

Om du föredrar ett enda element utan pseudoelement listar du bruset först i background-image och sätter background-blend-mode: soft-light, normal. Då förlorar du den separata opacitetsratten, så baka in styrkan i SVG i stället, till exempel med opacity='0.5' på rect.

Hur mycket korn räcker

1. 1

   Börja svagt

   Börja på opacity: 0.3 med soft-light. Du bör knappt märka det på armlängds avstånd.

2. 2

   Kontrollera det mörkaste området

   Banding lever i mörka, långsamma toningar. Höj opaciteten tills stegen där löses upp och sluta sedan.

3. 3

   Anpassa kornet till storleken

   Hero-ytor i helskärm tål något grövre korn, runt 0,6. Kort och knappar vill ha fint korn, runt 0,9.

4. 4

   Kontrollera på en telefon och en stor skärm

   Korn som ser rätt ut på en skärm kan se ut som damm på en annan. Sikta på en textur som du känner snarare än ser.

5. 5

   Kontrollera texten ovanpå

   Korn får inte försämra läsbarheten. Om liten text ligger på texturen sänker du styrkan eller håller texten på en lugnare yta.

Prestanda för brus i CSS

En kaklad data-URI är billig: webbläsaren renderar den lilla brickan en gång och upprepar den, och ett statiskt lager målas en gång. Den dyra versionen är att tillämpa filtret live på ett stort element med filter: url(#noise), vilket kör filtret över varje pixel varje gång ytan ritas om. Om du animerar korn, för ett flimrande filmutseende, flyttar du det kaklade lagret med transform i några ryckiga steg i stället för att generera om brus, och stänger av det för reducerad rörelse.

.grain {
  overflow: hidden;
}

.grain::after {
  inset: -50%;
  animation: flicker 0.6s steps(3) infinite;
}

@keyframes flicker {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-3%, 2%); }
  66%  { transform: translate(2%, -3%); }
}

@media (prefers-reduced-motion: reduce) {
  .grain::after { animation: none; }
}

En förrenderad brusbricka i PNG eller WebP på ungefär 128 till 256 pixlar är en lika bra källa om du redan har en. Korn är också en ingrediens i en bredare familj av ytor, från papper till glas, som tas upp i bakgrundstextur. Det är också det avslutande lagret på en mesh-gradient i CSS.

Korn är inbyggt i varje Gradiently Mark som en materialinställning, vid sidan av ljus och rörelse, så designer gjorda med en bär textur utan någon kod.

GR·W4AX·4M

Muslin Anvil

Se den här Marken