Grainy texture using CSS gradients 관련

CSS > Article(s)

---

Article(s)

---

Grainy texture using CSS gradients

A simple code to create a random-style background to simulate a grainy texture

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 Random CSS background by t_afif on CodePen.

Another example

CSS-only random background texture

See grainy-random CSS background II by t_afif on CodePen.

More CSS Tips

• Border gradient with border-radius The modern way to add gradient to borders while having rounder corners. July 10, 2024
• Inverted border-radius using CSS mask One property and 4 gradients to invert the corner of any element with a radius. July 09, 2024
• Cut-out shapes using clip-path Invert any kind of polygon shapes following simple steps. June 19, 2024
• Custom range slider with tooltip II Using modern CSS features to create a fancy range slider with tooltop. June 11, 2024

Grainy texture using CSS gradients

---

A simple code to create a random-style background to simulate a grainy texture