CSS Visual Directory
Dotted Grid
A grid of dots produced by tiling one tiny radial gradient across the element.
Edit Dotted Grid
Change any value to see it update live.
About this entry
What it is
A grid of dots produced by tiling one tiny radial gradient across the element.
Canvas and whiteboard backgrounds, notebook paper and subtle page texture.
Copy & use
How to copy and use dotted grid
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Canvas and whiteboard backgrounds, notebook paper and subtle page texture.
- 03
Check the final result
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Value by value
What each part of this rule does
Draws one tiny dot with a radial gradient, then tiles it. The background-size sets the grid spacing, so the two declarations have to be read together.
radial-gradient(#c9bfae 1px, transparent 1px)- One dot: solid to 1px, then nothing.
background-size: 16px 16px- The tile size, which is what actually sets the grid spacing.
Making it yours
How to adjust dotted grid
Change the dot radius and the tile size independently — the first controls weight, the second density. Unequal tile values give a rectangular grid rather than a square one.
Worth knowing before you ship it
At small tile sizes the dots alias into visible moiré patterns on non-integer zoom levels. Test at 110 and 125 percent before shipping it as a page background.
Common questions
Using dotted grid
What is dotted grid?
A grid of dots produced by tiling one tiny radial gradient across the element. Canvas and whiteboard backgrounds, notebook paper and subtle page texture.
Where do I put the dotted grid CSS?
Paste the declaration inside the rule for the element you are styling — a class, an id or a component's scoped stylesheet. Canvas and whiteboard backgrounds, notebook paper and subtle page texture. Change one value at a time so you can see what each part contributes, and check the cascade in case a more specific rule already sets the same property.
Will dotted grid work everywhere?
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Can I customise dotted grid after copying?
Paste the declaration into the selector for the element you want to style. Adjust one value at a time and check the cascade so an existing rule does not unexpectedly override the effect.
Also known as
Keep browsing