Background Generator

Grid backgrounds & grid patterns

A grid background — sometimes called a grid pattern, graph-paper background, or dot grid — is one of the most popular ways to add subtle texture to a hero section or app shell. In CSS it's just a couple of repeating gradients layered over a background color:

background-color: #ffffff;
background-image:
  linear-gradient(to right, #e2e8f0 1px, transparent 1px),
  linear-gradient(to bottom, #e2e8f0 1px, transparent 1px);
background-size: 24px 24px;

Swap the two linear-gradients for a single radial-gradient and you get a dot grid instead of lines. The generator above gives you sliders for the cell size, line thickness, color and opacity, plus an optional edge-fade mask — a mask-image: radial-gradient(...) that fades the grid out toward the edges for that clean, modern look you see on a lot of landing pages.

CSS background patterns

Beyond grids, the Patterns mode ships a library of ready-made CSS background patterns — dots, polka, diagonal lines, crosshatch, checkerboard, zigzag, stripes, triangles and rings — each built entirely from CSS gradients, so there are no images to host and they stay crisp at any zoom. Pick a pattern, set the foreground and background colors, opacity and scale, and the tool writes the CSS for you.

Because they're pure CSS, these patterns are tiny, fast, and easy to recolor for dark mode — a much lighter alternative to a repeating PNG or SVG tile.

Mesh gradients

A mesh gradient is the soft, multi-color blend you've seen all over modern product pages. The CSS technique layers several radial-gradients, each anchored at a different point and fading to transparent, over a base color:

background-color: #7c3aed;
background-image:
  radial-gradient(at 0% 0%, #7c3aed 0px, transparent 50%),
  radial-gradient(at 100% 0%, #db2777 0px, transparent 50%),
  radial-gradient(at 100% 100%, #2563eb 0px, transparent 50%),
  radial-gradient(at 0% 100%, #06b6d4 0px, transparent 50%);

Use the Mesh mode to add or remove color points, recolor them from a palette, or hit Randomize for a fresh combination. You can copy it as CSS, copy it as Tailwind, or download the mesh gradient as a PNG when you need a flat image for a social card or slide. For a dedicated editor with draggable points and SVG export, try the Mesh Gradient Generator.

Particle backgrounds

The Particles mode creates the classic animated particle network background — drifting dots connected by lines, optionally linking to the cursor. Unlike the original particles.js, the export is a single self-contained <canvas> plus a small script with no external library to load, so it's lighter and has nothing to break.

Tune the particle count, speed, link distance, dot size and colors, then copy the snippet and paste it into your page. It automatically pauses for visitors who have prefers-reduced-motion set.

How to add the background to your site

For grids, patterns and mesh gradients, paste the generated declarations onto the element you want to decorate — a section, a hero, or the body. If you use Tailwind, switch the output to Tailwind and drop the classes straight onto the element instead:

<div class="bg-[#ffffff] [background-image:linear-gradient(to_right,#e2e8f0_1px,transparent_1px),linear-gradient(to_bottom,#e2e8f0_1px,transparent_1px)] [background-size:24px_24px]">
  ...
</div>

For a background that sits behind your content, put it on a ::before pseudo-element or a fixed, full-screen layer with a negative z-index — that's exactly how the particle snippet is set up.

Grid vs pattern vs gradient vs particles — which should you use?

• Grid / dot grid — subtle structure for app shells, dashboards and hero sections; cheapest to render.
• Patterns — more personality (stripes, checks, zigzags) while staying pure CSS and recolorable.
• Mesh gradient — soft, colorful, premium-feeling backgrounds; also exportable as a flat image.
• Particles — motion and interactivity for landing pages; use sparingly and respect reduced-motion.

Need a plain linear or radial gradient instead? Use the dedicated CSS gradient generator.