CSS Tip

Grainy texture using CSS gradients

Create a random-style background (grainy texture) using a few lines of code.

grainy background texture

html {
  --s: 6px; /* control the size */
  
  --g: repeating-conic-gradient(#774F38 0 25%,#ECE5CE 0 50%) 0/;
  background:
    var(--g) calc(1*var(--s)) calc(7*var(--s)),
    var(--g) calc(2*var(--s)) calc(5*var(--s)),
    var(--g) calc(3*var(--s)) calc(3*var(--s)),
    var(--g) calc(5*var(--s)) calc(2*var(--s)),
    var(--g) calc(7*var(--s)) calc(1*var(--s));
  background-blend-mode: darken;
}

See the Pen Random CSS background by Temani Afif (@t_afif) on CodePen.

Another example

CSS-only random background texture

See the Pen grainy-random CSS background II by Temani Afif (@t_afif) on CodePen.

More CSS Tips