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="grid-bg">
  <div class="content">
    <span class="pill">v2.0 is live</span>
    <h1>Grid Fade</h1>
    <p>Two gradients and one mask.</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.

Build a full-screen dark hero background with a fading line grid, using only HTML and CSS.

Requirements:
- Wrapper: min-height 100vh, background #0b1020, content centred with CSS grid.
- Draw the grid on a ::before pseudo-element that covers the wrapper (inset: 0).
- Use two layered linear-gradients as background-image: one horizontal 1px line and one vertical 1px line in rgba(255,255,255,0.08), with background-size 48px 48px, so they repeat into a grid.
- Fade the grid towards the edges with mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%). Include the -webkit- prefix.
- Above the grid, show a small rounded "pill" label, a large heading and a subtitle in white.
- No images, no JavaScript.

Return a single HTML file with a <style> block.

How to build it, step by step

1. 1

   Give the wrapper a dark solid colour and position: relative so the pseudo-element can be positioned inside it.

2. 2

   Create a ::before pseudo-element with inset: 0. Drawing the grid here, rather than on the wrapper, means the mask in step 4 will not affect your text.

3. 3

   Draw the lines with two linear-gradients. Each gradient paints a 1px line then goes transparent; one is rotated 90deg to make vertical lines.

4. 4

   Set background-size: 48px 48px so the two gradients tile, producing a grid of 48px squares.

5. 5

   Add a radial mask-image. Where the mask is black the grid shows; where it is transparent the grid disappears, giving the fade.

6. 6

   Put the content in a relatively positioned child so it sits above the pseudo-element.

Customisation tips

• Change background-size to 24px for a denser grid or 80px for a more open one.
• For a light version use background #ffffff and lines in rgba(0,0,0,0.06).
• Move the mask centre (for example 'ellipse at top') to make the grid fade downward from a navbar.

More backgrounds