CSS Gradient Generator
Layer linear, radial and conic gradients, then copy the CSS.
Noise Texture Generator
A grain and noise texture maker for the web
The Wensity Noise Texture Generator makes grain, noise and paper textures in your browser and exports them as seamless tiles, images or CSS. Use it for a texture file, a grainy gradient background, or grain over a photo, starting from one of 18 presets.
Grain and clouds are drawn by the browser's own SVG noise filter, so the preview, the CSS, the SVG and the PNG are the same noise, and a tile repeats with no seam.
Grain texture, grainy gradient or grain on a photo
Pick what the grain is for, and the controls and exports follow.
Texture · 8
A seamless tile of film grain, static, sand, ink clouds or paper.
Background · 6
Grain over a linear, radial or solid background: a grainy gradient.
Image · 4
Grain over your own photo, with a before and after slider.
Noise texture examples
One from each use, exported from the generator. Each opens above with its settings.
Make a grainy gradient with a CSS noise overlay
The grain is a separate layer, so the colours under it never change.
A grainy gradient is a smooth colour blend with fine noise over it. The grain breaks up the banding a plain gradient can show on large screens, and gives a flat background a printed feel.
Copy CSS and you get the gradient as the background and the grain as an ::after layer: a small SVG noise tile inlined in the stylesheet, with a blend mode and an opacity. There is no image to host. Hard light is the default blend, because overlay and soft light leave grain invisible on dark colours. For a noise gradient with more control over the colours, build the gradient in the CSS Gradient Generator and add grain there.
Film grain, noise and paper textures
Four kinds of texture: fine grain, soft grain, clouds and paper.
Fine grain reads like film grain or a print, soft grain like a matte finish, and clouds are larger, smoother noise. Each takes a size, contrast and brightness, colours of your own or raw grey and coloured noise, and a tile size for the exported pattern.
Paper is a paper texture drawn by the Background Studio engine, with sliders for roughness, fibres, folds, wrinkles, crumples and drops. It exports as an image or a React component rather than as a tile.
Download a seamless noise texture as PNG or SVG
Every export is free, with no watermark and no account.
Seamless tiles
A PNG tile, a transparent PNG tile to lay over anything, or an SVG tile that stays tiny.
Whole design
PNG, JPG, WebP or SVG at the canvas size, and PNG at double size when it fits.
Code
CSS with the grain layer, or a React component you paste into your app.
Uploaded photos stay in your browser. A share link carries the settings but never the upload, so the person you send it to sees the same grain on a sample photo.
Use grain as a layer in Background Studio
Grain is also a layer in Background Studio, where it can sit over any gradient, mesh or shader, next to halftone and glass.
Background Studio is Wensity's full background editor, and Open in full studio carries your design into it: 224 gradient, shader and texture backgrounds in 19 sections, layers, and export to PNG, MP4 video or a React component.
Noise texture questions, answered
What people ask about grain and noise textures: making a grainy gradient in CSS, adding grain to a photo, and seamless tiles.
Yes. Every preset, control and export is free, with no account and no watermark: PNG, JPG, WebP and SVG images, seamless tiles, CSS and a React component.
Choose Background, pick or build a gradient, and copy the CSS. It gives the gradient as the element's background and the grain as an ::after layer with a tiny SVG noise tile, a blend mode and an opacity, so the grain sits over the colour without an image file.
Yes. Choose Image, then drop in your own photo or use one of 8 samples, and a before and after slider shows the grain against the original. Your upload stays in your browser and is never sent to Wensity.
Yes. Grain and cloud noise are drawn with the browser's own SVG turbulence filter with stitched edges, so a tile repeats with no visible seam. Download it as a PNG, a transparent PNG for overlays, or an SVG that stays small at any size.
They are the same random texture at different scales. Fine grain reads like film grain or print, soft grain like a matte finish, and clouds are larger, smoother noise. Paper adds fibres, folds, wrinkles and crumples on top.
Overlay and soft light blending barely change dark colours, so grain disappears on them. The generator uses hard light by default, which keeps grain visible on dark and light backgrounds alike, and you can switch to overlay, soft light, multiply or screen.
Download a seamless tile and repeat it: as a tiled image fill in Figma, or as a pattern in Photoshop. When the grain is set to go over a background or an image, the export menu also offers a transparent PNG tile, which you can lay over any design and set to a blend mode such as overlay or soft light.
No. The copied CSS carries the grain as a small SVG noise tile written into the stylesheet itself, repeated across the element, so there is no image to host or load separately. The SVG tile export is the same noise as a file, for anywhere a stylesheet cannot go.
Parth
Founder, Wensity
Still have a question?
Ask about plans, licensing, or templates and you will hear back from me directly.
Email hey@wensity.comMore free design tools
Grain looks best over colour, so start from a gradient or a mesh and bring it back here. See all free tools.
