Tool
Noise & Grain
Add the filmic texture that makes flat UI feel physical. Dial in a tileable grain — fine film dust to coarse static, mono or colored — and watch it sit over a live sample surface in the exact blend mode you'll ship. Export a performant SVG-filter CSS data-URI, a raw SVG, or a drop-in React overlay.
Presets
FilmFine dustCoarseStaticHaze
Grain
Texture
Colour
Blend
Preview surface
Preview only — every export is a static, tileable grain.
Preview surface
Grain sits above the whole box
Tune it on the left — intensity, size and blend update this overlay live, exactly as the exported CSS will render.
Sample chip/* Tileable film grain — put it on any element */
.grain {
position: relative;
isolation: isolate;
}
.grain::after {
content: "";
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'160'%20height%3D'160'%3E%3Cfilter%20id%3D'grain'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.74'%20numOctaves%3D'2'%20seed%3D'7'%20stitchTiles%3D'stitch'%20result%3D'n'%2F%3E%3CfeColorMatrix%20in%3D'n'%20type%3D'saturate'%20values%3D'0'%20result%3D'n'%2F%3E%3CfeComponentTransfer%20in%3D'n'%3E%3CfeFuncR%20type%3D'linear'%20slope%3D'1.96'%20intercept%3D'-0.48'%2F%3E%3CfeFuncG%20type%3D'linear'%20slope%3D'1.96'%20intercept%3D'-0.48'%2F%3E%3CfeFuncB%20type%3D'linear'%20slope%3D'1.96'%20intercept%3D'-0.48'%2F%3E%3CfeFuncA%20type%3D'table'%20tableValues%3D'0.32%200.32'%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D'160'%20height%3D'160'%20filter%3D'url(%23grain)'%2F%3E%3C%2Fsvg%3E");
background-size: 160px 160px;
background-repeat: repeat;
mix-blend-mode: overlay;
}