Home / Color and Light / Grainy Gradient
Grainy Gradient CSS Template, Free with Live Demo
Free grainy gradient website template for a podcast. Warm mesh gradients with film grain noise from an inline SVG filter, no image files. Live demo. The example is Late Signal, a podcast.
What is grainy gradient?
A grainy gradient adds film grain on top of smooth color, so it looks printed or photographed instead of flat and digital. It is one of the biggest looks of the last few years, from Stripe to album covers.
The mesh is four radial gradients at the corners. The grain is an SVG noise filter written straight into the CSS as a data URL, blended with overlay. There is no image file to download.
Good for
- Podcasts and music
- Creative agencies
- Tech startups that want warmth
- Posters and event pages
What you get in this template
- Mesh gradient from four radial gradients
- Film grain from an inline SVG feTurbulence filter
- One reusable .grain class for any element
- Episode cards with their own color mesh
- Play button drawn in CSS
The key CSS
This is the part that makes the grainy gradient look work. Copy it into your own project.
.grain { position: relative; isolation: isolate; }
.grain::after {
content: ""; position: absolute; inset: 0; z-index: -1;
opacity: .45; mix-blend-mode: overlay; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
How do you add a grain texture in CSS?
Use an SVG with an feTurbulence filter as a background image in a pseudo element, and blend it over your gradient with mix-blend-mode: overlay.
Why does isolation: isolate matter here?
It keeps the grain layer blending only with its own element, so it does not mix with things behind it.
Will the grain make the page slow?
No. The SVG is tiny and repeats as a normal background image.
More Color and Light designs
041. Aurora Gradient
Solace, a skincare brand
042. Duotone
Harbor Film Festival
043. Monochrome
Atelier Verde, an architecture studio
044. Dark Mode First
Ledgerly, a budget app
045. Neon Cyberpunk
Voltage Arena, an esports tournament
046. Earthy Natural
Rootstock Farm, an organic veg box
047. Pastel Dream
Cloud Nine, a baby clothing shop
048. High Contrast Accessible
Brookfield Council, a local government site