What the noise texture generator makes
A square tile of grain or cloud noise that repeats without a seam, in a tint of your choice or as colored static. Fine grain is the classic film look, coarse grain reads like paper or concrete, fractal clouds are soft patches for fog and smoke, and speckles are sparse dust. Intensity sets how much of the tile the grain covers, contrast how hard it is, scale how big the grain is, and opacity how strong the whole layer is. The texture comes as a tiny SVG filter, as a PNG computed pixel by pixel from the seed, and as CSS you can paste into a stylesheet.
How designers use grain and noise
- Grainy gradients: a flat CSS gradient can show banding on large areas; a layer of fine grain in overlay or soft-light mode hides the bands and adds depth. Choose Gradient as the background to try it right here.
- Hero backgrounds and cards: a dark hero with 20% to 40% white grain feels printed rather than digital. Keep the tile at 256 px and let the browser repeat it.
- Textures for print and illustration: coarse grain in a warm brown gives paper, clouds in gray give fog and smoke, and speckles give dust on a photo. Export the PNG at the size of the area, or a 2048 px tile for a poster.
- Overlays in video and motion: a seamless 1024 px grain tile can be looped and offset by a few pixels each frame for a living film grain.
Vector filter or raster pixels
The vector engine writes an SVG with a feTurbulence filter and a color matrix. The file holds no pixels, only the recipe, so it is a few hundred bytes and can be drawn at any size. The browser computes the grain when it draws the page. That makes it ideal for CSS backgrounds. The raster engine computes every pixel in your browser from the seed, using typed arrays, and saves a PNG. The PNG shows the same pixels wherever it goes, including in design and video programs, and the raster engine also offers a blur. A 1024 px tile takes well under a second.
How the tile stays seamless
In the SVG, the filter covers exactly the tile and uses stitchTiles, which asks the renderer to make the noise continue across the edges of that region, so the tile can repeat in both directions. In the raster engine, grain is independent per pixel and so needs no stitching; clouds use value noise that wraps around after one tile, and the blur reads across the edges from the opposite side. Switch on Show tile edges to see where the joins are. With Seamless off the clouds are unwrapped and the blur stops at the edges, which only makes sense for a single image.
Using the CSS
The copied rule sets background-image to the tile as a data URL and background-size to the tile size. With a background color or gradient chosen, the noise is listed first and the gradient second, so the grain sits on top, and the blend mode is written as background-blend-mode: the grain blends with that color or gradient only, never with the page behind the element, just like in the preview. Apply that rule to the section itself, so the grain sits behind the content. With no background chosen, the rule is a plain grain overlay and the blend mode is written as mix-blend-mode, which blends the grain with whatever is behind it; put that rule on a pseudo-element or an overlay div above your content. For the SVG pattern generator and the dot scatter generator the same rule structure applies.
How to use the noise generator
- 1Pick Vector SVG for websites or Raster PNG for images, then choose a type: fine grain, coarse grain, fractal clouds or speckles, or start from a preset.
- 2Set intensity, contrast and scale until the grain reads right, then pick a tint color or switch to colored noise. The raster engine can also blur.
- 3Choose a tile size, and a background color or gradient with a blend mode to see the grain in context. Shuffle the seed for a different arrangement.
- 4Download the SVG or the PNG at the size you need, copy the SVG code, or copy the CSS and paste it into your stylesheet. Copy link saves the exact texture.
Frequently asked questions
What is the difference between the vector and the raster engine?
The vector engine writes an SVG with a feTurbulence filter. The file is a few hundred bytes, the browser computes the grain itself, and it stays crisp at any size. The raster engine computes every pixel in your browser and saves a PNG, which looks the same everywhere, including in apps and programs that cannot run SVG filters. Use vector for websites and raster for images, video and print.
How do I get the grainy gradient look?
Pick the Grainy gradient preset, choose Gradient as the background, and copy the CSS. The copied rule layers the noise over a gradient with background-image, and background-blend-mode blends the grain with the gradient only; set the blend mode to overlay or soft-light to let the colors show through the grain. In a design program, place the PNG tile over your gradient and set the layer to the same blend mode.
When should I ship the PNG instead of the SVG?
When the exact pixels matter, or when the file goes into a program that does not run SVG filters. The SVG only holds the recipe, and each renderer computes the grain itself when it draws the file. The raster engine computes every pixel here, once, from the seed, so the PNG looks the same wherever it is shown.
Is the tile seamless?
Yes, in both engines. The SVG filter uses stitchTiles, which tells the browser to make the noise continue across the edges of the tile. The raster engine uses wrapped noise and a wrapped blur, so the last pixel column continues into the first. Switch on Show tile edges to check the joins in the preview, and turn Seamless off only when you need one image that will never repeat.
How big should the tile be?
For a CSS background, 256 px is plenty for fine grain and 512 px for clouds; the browser repeats it. For an image you place in a design, make the tile at least as large as the area it covers, or export the vector engine at a larger PNG size.
Why is the CSS for the raster engine so long?
A PNG written into a stylesheet as a data URL grows with the tile. Up to about 300 KB the generator writes the data URL into the CSS. Above that it writes a file name instead; download the PNG, put it next to the stylesheet and keep the rest of the rule.