Backgrounds
Background - Grain noise
A coloured gradient with an animated SVG fractal-noise grain overlay for a tactile, analog feel.
- SVG fractal noise
- Flicker animation
- Overlay blend
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
A coloured CSS gradient sits underneath an SVG fractal-noise texture that is layered on top with a blend mode so its speckle mixes into the colours below. A short flicker animation nudges the noise every frame, which keeps the grain alive rather than frozen. The result is the tactile, slightly analog look of film or print stock.
When to use it
- On a brand site that wants an editorial, print-inspired texture
- Behind sections where a perfectly clean digital gradient feels too sterile
- As a background for a portfolio or studio site with a crafted, physical aesthetic
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 4 options
gradientBase gradient - 0.04-0.4
grainGrain intensity
Related components
Using this block
Buy it, then copy components/blocks/bg-grain-noise/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.