OneTaskBy Tim King · Updated
Dot Background
Grid Size, Spacing and Radial Edge Fade for Hero Sections in Pure CSS
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 Dot Background works
A dot background covers a section with a neat grid of small dots, the look used on design tool canvases and many product sites. Pick the spacing, dot size, colour and an edge fade, and copy the HTML and CSS. One gradient does it, with no image files.
Dots give a surface texture that feels lighter than grid lines. They hint at a canvas or workspace and sit quietly behind a heading, so they suit landing pages, sign-up screens and empty states.
How the dot background is drawn
A single radial-gradient on a ::before layer paints one solid circle of your colour and clear
space around it. background-size repeats that tile at the spacing you set, so the dots form an
even grid. The gradient stops half a pixel after the radius, which gives each dot a soft,
anti-aliased edge instead of a jagged one.
The fade
The optional fade uses mask-image with a radial gradient, solid in the middle and clear at the
edges, so the dots fade out gently toward the corners and draw the eye to the centre of the
section.
FAQ
How do I make polka dots instead of a fine dot grid?
Raise the dot radius to 5 or 6 pixels, raise the spacing to 30 or more and turn the fade off. For the classic offset polka look, add a second copy of the gradient shifted by half the spacing.
Why are my dots cut off or uneven?
Very small dots can land between screen pixels and look uneven. Use a radius of 1.5 pixels or more and a whole-number spacing, and the dots will render evenly on most screens.
Does a dot background affect page speed?
No. It is drawn by the browser from one gradient and needs no downloads, so it adds almost nothing to the page weight and it stays sharp on high-resolution screens at any zoom level.
Can the dots move or animate?
This tool makes still dots, which suit most layouts. For a slow drifting pattern, the moving background tool pans a dot pattern forever, and it stops for visitors who ask for reduced motion.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Grid Background
Faded grid-line 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.
Particle Background
Build a drifting network of connected dots, no library.