Grid background
Also called grid pattern background, dot grid background, or graph paper background
A decorative background of thin grid lines, dots, or stripes, often faded toward the edges, used behind hero sections and product shots.
// Lines drawn in currentColor at 8%, so they follow the theme's text color
// in light and dark mode. For dots, use
// bg-[radial-gradient(currentColor_1px,transparent_1px)] bg-size-[20px_20px].
const GRID =
'bg-[linear-gradient(to_right,currentColor_1px,transparent_1px),linear-gradient(to_bottom,currentColor_1px,transparent_1px)] bg-size-[32px_32px] text-foreground/8';
export function GridHero() {
return (
<section className='relative isolate grid min-h-96 place-items-center overflow-hidden px-6 text-center'>
{/* The radial mask fades the grid out toward the edges. */}
<div
aria-hidden
className={`absolute inset-0 -z-10 ${GRID} [mask-image:radial-gradient(ellipse_at_center,black_30%,transparent_75%)]`}
/>
<h1 className='text-5xl font-semibold tracking-tight'>
Build on solid ground
</h1>
</section>
);
}Add a grid background to the hero: 1px lines at 8% black every 32px, drawn with two linear-gradient layers and background-size: 32px 32px, faded with mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%). Use white lines at 8% in dark mode, and keep the headline centered on top.
Paste into Layerwise or any AI coding tool.
What is Grid background?
A grid background repeats a simple pattern, such as square lines, a dot grid, or diagonal lines, across a section. CSS draws it without images: linear-gradient() layers make lines, radial-gradient() makes dots, and background-size sets the spacing. A radial mask-image fades the pattern out toward the edges, so it frames the content instead of filling the whole screen.
It gives developer tools, AI products, and landing pages a technical, blueprint feel, and it adds texture to empty hero space without distracting from the headline.
Keep lines faint, around 5 to 10% contrast against the background, and line the pattern up with your layout spacing so content seems to sit on the grid. Use theme colors so the pattern works in both light and dark mode.
Often confused with
- CSS Grid
- CSS Grid is a layout system for placing elements in rows and columns. A grid background is only a decorative pattern.
Related terms
All termsMask
A CSS technique that uses an image or gradient to set how visible each part of an element is, often used to fade edges softly.
Hero section
The large first section at the top of a landing page, with a headline, a short subhead, a call to action, and a visual.
Grain texture
A fine layer of random noise placed over a gradient or image to add a tactile, printed feel and hide color banding.
Mesh gradient
A smooth, multicolor gradient where several colors blend outward from different points, like paint mixing, often used for hero backgrounds.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.