Beautiful Grain Textures
Add subtle noise and grain to your backgrounds for a more natural and professional look.
1. Grain Style
2. Background
3. Grain Settings
4. Output Options
Generates CSS with both the background and grain texture combined.
5. Advanced (Optional)
CSS Output
.texture-background {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 4.8 0 0 0 -2.52' result='grain'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23grain)' opacity='0.25'/%3E%3C/svg%3E"), linear-gradient(135deg, #a78bfa 0%, #f9a8d4 100%);
background-size: 300px, auto;
background-blend-mode: soft-light, normal;
}Paste the class on any element to give it the textured background.
Popular Grain Presets
Examples
About CSS Noise & Grain Generator
Add beautiful noise and grain textures to CSS backgrounds. Customize grain style, intensity, size, opacity, and color, then copy the CSS instantly.
How to Add Grain to a CSS Background
- 1Choose a grain style such as Fine, Soft, Film, Dust, Paper or Vintage.
- 2Pick the background behind the texture — a solid colour, a linear or radial gradient, or a mesh gradient.
- 3Adjust intensity, grain size and opacity, then set the grain colour and choose Monochrome or Colored.
- 4Choose Background + Grain for a complete background, or Grain Only for a transparent layer you can put over images, videos or cards.
- 5Copy the CSS, SVG or HTML, or download the texture as an SVG.
Frequently Asked Questions
Layer a noise texture above the gradient in the same background-image list and blend it with background-blend-mode. The Background + Grain output does exactly this on a single class — no images or extra elements needed.
The texture is an SVG feTurbulence filter embedded in the CSS as a small data URI. It tiles seamlessly and is drawn by the browser, so there is nothing to host or download.
Yes. Choose Grain Only: the CSS adds the texture on an ::after layer with a blend mode, so adding the class to any image wrapper, video container, card or hero section textures whatever it already shows.
Soft Light gives the most natural, subtle result on most backgrounds. Overlay is stronger, Multiply suits dark grain on light backgrounds, and Screen suits light grain on dark backgrounds.
The texture is a single small repeating tile, so it is lightweight. Keep Detail moderate on very large areas, and prefer one textured background over many separately textured elements.
Related Tools
More free CSS generators you might like.