Skip to main content

Grid with dashed lines

Create a grid of dashed lines using a few lines of code

A grid of dashed lines

html {
--s: 100px; /* control the size of the grid */
--n: 4; /* control the granularity */
--t: 2px; /* the thickness */
--g: 10px; /* the gap between dashes */

--c:#556270 25%,#0000 0;
conic-gradient(at var(--g) var(--t),var(--c))
calc((var(--s)/var(--n) - var(--g) + var(--t))/2) 0/
calc(var(--s)/var(--n)) var(--s),
conic-gradient(from 180deg at var(--t) var(--g),var(--c))
0 calc((var(--s)/var(--n) - var(--g) + var(--t))/2)/
var(--s) calc(var(--s)/var(--n));

See the Pen CSS-only Grid of dashed lines by Temani Afif (@t_afif) on CodePen.