CSS Tip

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;
  background: 
    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.

More CSS Tips