← Workshop
UI Texture Techniques
Noise Generation Methods
Five approaches for adding grain and texture to interfaces. Select a technique, adjust the controls, and see exactly how it's built.
SVG feTurbulence Filter
The most common approach
0.45
0.65
<feTurbulence baseFrequency="0.65" />
Uses the SVG feTurbulence primitive to generate Perlin or fractal noise directly in the browser. Resolution-independent, GPU-accelerated, zero network requests.
All methods
Implementation
1<!-- Hidden SVG filter definition -->
2<svg width="0" height="0">
3 <filter id="noise">
4 <feTurbulence
5 type="fractalNoise"
6 baseFrequency="0.65"
7 numOctaves="4"
8 seed="15"
9 stitchTiles="stitch"
10 />
11 <feColorMatrix type="saturate" values="0" />
12 </filter>
13</svg>
14
15<style>
16 .surface {
17 background: linear-gradient(135deg, #f5ede0, #e8dcc8);
18 position: relative;
19 }
20
21 .surface::after {
22 content: "";
23 position: absolute;
24 inset: 0;
25 filter: url(#noise);
26 opacity: 0.12;
27 mix-blend-mode: multiply;
28 }
29</style>