Texture / atmosphere · 9.2
feTurbulence grainy gradient
Risograph print; a dusty sunset.
The grainy gradient, with zero JavaScript and zero canvas.
4 knobs
How it actually works
The only feature in this catalog that works with JavaScript disabled, because there is no JavaScript in it. Turn the knobs and you are editing CSS. Turn JS off and the effect is still there, at its default values, exactly as intended. Everything else on this site degrades gracefully. This one does not have to.
feTurbulence with type fractalNoise generates Perlin noise. The SVG is used as a CSS background (an inline data-URI works), layered underneath a linear-gradient. Then filter: contrast(170%) brightness(1000%) pushes the faded colours toward pure white and black, which is what sharpens the smooth noise into visible specks. All published values are verbatim.
The knobs, named
baseFrequency is grain scale. numOctaves is detail. The contrast and brightness pair is what makes the noise visible at all. All four are the published values.
| Knob | Source | What it teaches |
|---|---|---|
| baseFrequency | sourced | Grain scale, and the published default is 0.65. Low is a lava lamp; high is sand. |
| numOctaves | sourced | Detail: how many layers of noise stack. The published default is 3. Past 4 the visual gain is nil and the raster cost is not. |
| Contrast | sourced | Half of the published pair (170%). This and brightness are what turn smooth noise into specks. |
| Brightness | sourced | The other half (1000%). It looks like a typo. It is not. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
VERIFIED (author)
CSS-Tricks "Grainy Gradients"; Codrops "SVG Filter Effects: Creating Texture with feTurbulence". Both research captures found this independently. All values above are verbatim.
- Seen on
- CSS-Tricks; reference asset at grainy-gradients.vercel.app/noise.svg. ATTRIBUTION DISPROVEN, recorded here so it is not repeated: feTurbulence returned 0 hits across all 16 rendered craft-canon sites, including Linear and Vercel, where the first research pass associated it. DO NOT CLAIM LINEAR USES AN SVG GRAIN FILTER. The technique is real and verified; that attribution is not.
- Dependencies
- VANILLA. No JS, no WebGL, works without either.
- Difficulty
- trivial: it is a CSS/SVG snippet
- Performance
- The real caveat is the source's own: it "sucks performance-wise" and re-rasterizes on resize. Bake to a PNG or confine it to a fixed-size element.
- Accessibility and the floor
- Decorative, so it is already outside the accessibility tree. Contrast over grain is on you. No motion, so no reduced-motion branch is needed.
Notes
Composability. Put it under anything. It is a background-image, and it is the honest answer whenever a WebGL grain (9.1) is more machinery than the job needs.