OneTaskBy Tim King · Updated
Grid Background
Thin Lines, Adjustable Cell Size and Radial Edge Fade Built From Two Gradients
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Grid Background works
A grid background draws thin lines across a section like graph paper, often fading out toward the edges behind a hero heading. Choose the cell size, line width, colour and fade, and copy the HTML and CSS. It is two gradients and a mask, with no images.
Faded grids are a common backdrop on product and developer sites. They add depth and structure without competing with the heading, and they scale to any screen because they are drawn by CSS rather than stretched from an image.
How the grid background is built
Two linear-gradient layers sit on a ::before element. One draws vertical lines by going from
your line colour to transparent after the line width, and the other does the same for horizontal
lines. background-size repeats both every cell, and background-position: center keeps a line
crossing in the middle so the grid looks balanced at every width.
The fade
The fade is a mask-image with a radial gradient that is solid in the centre and clear at the
edges. Anything under a clear part of the mask disappears, so the grid melts into the background
colour. Turn it off for an even grid across the whole section.
FAQ
How is this different from a CSS pattern generator?
A pattern generator makes many repeating tiles as a whole background. This tool is focused on the grid-line hero backdrop: a separate layer behind your content, with line width, strength and an edge fade tuned for that look.
Does the fade work in every browser?
The unprefixed mask-image property works in current Chrome, Edge, Firefox and Safari. In an old
browser without mask support the grid still shows, just without the fade, so nothing breaks.
How do I make the grid lines sharper?
Use a whole-number line width and a cell size that divides evenly, like 32 or 40 pixels. Raising the strength also helps on light backgrounds, where faint grey lines can look washed out.
Can I use a grid background on a light theme?
Yes. Set a light background colour and a mid grey or brand colour for the lines, then lower the strength to around 15 to 20 percent so the grid stays in the background behind your text.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Dot Background
Faded dot-grid background for hero sections, pure CSS.
CSS Pattern Generator
Repeating background patterns built from CSS gradients, no images.
Moving Background
Endlessly panning stripes, grid or dots in pure CSS.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Gradient Maker
Linear, radial and conic CSS gradients with live preview.