Expressive & trend · 2018 – present
Grainy
A fine grain overlay over flat or gradient surfaces — adding texture, warmth, and analogue imperfection to an otherwise smooth digital screen.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 15 tokens
- --bg
oklch(20% 0.04 30) - --fg
oklch(94% 0.02 65) - --muted
oklch(70% 0.04 55) - --surface
oklch(26% 0.05 30) - --surface-2
oklch(30% 0.05 30) - --border
oklch(42% 0.06 35) - --accent
oklch(72% 0.18 50) - --accent-fg
oklch(14% 0.03 30) - --focus
oklch(72% 0.18 50)
| Token | Value |
|---|---|
| --font-body | 'Fraunces', Georgia, serif |
| --font-display | 'Fraunces', Georgia, serif |
| --radius | 6px |
| --radius-sm | 4px |
| --shadow | 0 2px 12px oklch(0% 0 0 / 0.4) |
| --shadow-lg | 0 8px 32px oklch(0% 0 0 / 0.55) |
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,700;1,9..144,300;1,9..144,400&display=swap');
:root {
--bg: oklch(20% 0.04 30);
--fg: oklch(94% 0.02 65);
--muted: oklch(70% 0.04 55);
--surface: oklch(26% 0.05 30);
--surface-2: oklch(30% 0.05 30);
--border: oklch(42% 0.06 35);
--accent: oklch(72% 0.18 50);
--accent-fg: oklch(14% 0.03 30);
--focus: oklch(72% 0.18 50);
--font-body: 'Fraunces', Georgia, serif;
--font-display: 'Fraunces', Georgia, serif;
--radius: 6px;
--radius-sm: 4px;
--shadow: 0 2px 12px oklch(0% 0 0 / 0.4);
--shadow-lg: 0 8px 32px oklch(0% 0 0 / 0.55);
}Where it came from
Origin: Film photography revival, SVG noise filter trend
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
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Adds analogue warmth to flat surfaces | Subtle grain is barely perceptible on screen |
| Achievable with a single SVG filter | Heavy grain reduces readability |
| Works across colour schemes | 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.