# Grainy

> A fine grain overlay over flat or gradient surfaces — adding texture, warmth, and analogue imperfection to an otherwise smooth digital screen.

- Category: Expressive & trend
- Era: 2018 – present
- Origin: Film photography revival, SVG noise filter trend
- Lesson: https://design.dawit.dev/styles/grainy
- Try it: https://design.dawit.dev/styles/grainy?style=grainy

## Where it came from

As film photography revived among younger audiences and Instagram filters popularised the look of aged photos, designers started adding film-grain textures to digital UIs to counteract their coldness. SVG noise filters (feTurbulence) and blend modes made it achievable in the browser. It spread through Dribbble and Figma communities and became a common technique on landing page hero sections.

## How to spot it

- SVG or CSS noise filter as a surface overlay
- Flat or gradient base underneath the grain
- Subtle — grain adds texture, not chaos
- Warm colour palette typical pairing

## Strengths

- Adds analogue warmth to flat surfaces
- Achievable with a single SVG filter
- Works across colour schemes

## Weaknesses

- Subtle grain is barely perceptible on screen
- Heavy grain reduces readability
- Can increase visual noise on already dense layouts

## In the wild

- Dark SaaS landing-page hero sections
- Gradient-plus-grain poster and brand work
- Many Figma Community file covers

## Use it when

Adding warmth or analogue character to a flat colour or gradient background.

## Related styles
[Collage](https://design.dawit.dev/styles/collage.md), [Risograph](https://design.dawit.dev/styles/risograph.md), [Organic Blob](https://design.dawit.dev/styles/organic-blob.md)