CSS Grid Pattern Generator

Start with a CSS grid background palette

This grid pattern generator creates a CSS grid background or graph paper background from layered line gradients and a theme-aware base color.

• Pick a palette to influence the base color of the grid background
• The generator automatically balances the line color against the base
• Switch your site theme to preview how the graph paper background behaves in light and dark contexts

Set the graph paper structure

The Basic controls define the core grid pattern.

• Minor size changes the spacing of the small grid background cells
• Major every inserts stronger guide lines for a graph paper background look
• Line width changes how technical, subtle, or bold the CSS grid background feels

Fine-tune opacity, offset, and seed

The Advanced controls are useful when you need a more specific grid pattern background.

• Change Minor opacity and Major opacity to separate helper lines from anchor lines
• Use Offset X/Y when the grid background needs to align with other layout elements
• Randomize the Seed for new grid background color pairings while keeping the same graph paper structure controls

Copy CSS or move into the editor

When the grid pattern background looks right, copy the CSS, download an image, or open it in the editor.