The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="grain">
  <div class="content">
    <h1>Film Grain</h1>
    <p>SVG noise over a gradient.</p>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same background, then ask it to adapt the colours, text or framework to your project.

Create a gradient background with a film-grain noise texture using only CSS (no image files).

Requirements:
- Full-viewport wrapper with a diagonal gradient from deep indigo (#1e1b4b) to burnt orange (#7c2d12).
- Add the grain with a ::after pseudo-element covering the wrapper (inset: 0, pointer-events: none).
- Its background-image is an inline SVG data URL containing an feTurbulence filter (type fractalNoise, baseFrequency 0.9, numOctaves 3, stitchTiles stitch) applied to a full-size rect.
- Blend it with mix-blend-mode: overlay at about 0.6 opacity.
- Centre white heading text above the grain (z-index 1).
- No JavaScript.

Return one HTML file with CSS in a <style> tag.

How to build it, step by step

1. 1

   Start with a normal gradient background on the wrapper.

2. 2

   Add a ::after pseudo-element that covers the whole wrapper and set pointer-events: none so it never blocks clicks.

3. 3

   Write a tiny SVG that uses the feTurbulence filter to generate noise, and embed it as a data URL in background-image. The # in url(#n) must be written as %23 inside a data URL.

4. 4

   Set mix-blend-mode: overlay so the noise lightens and darkens the gradient instead of covering it.

5. 5

   Tune opacity until the grain is visible but subtle.

Customisation tips

• Lower baseFrequency to 0.6 for coarser grain, raise it to 1.2 for finer grain.
• Try mix-blend-mode: soft-light for a gentler texture on light backgrounds.
• The same ::after rule can be added to any existing section to give it texture.

More backgrounds