CSS Tip

Dashed lines using CSS gradient

Create dashed lines using only one gradient

A background with dashed lines

html {
  --t: 2px;  /* thickness of the lines */
  --g: 50px; /* gap between lines */
  --s: 12px; /* size of the dashes*/
  
  background:
    conic-gradient(at var(--t),#0000 75%,#000 0)
    var(--g)/calc(var(--g) + var(--t)) var(--s);
}

See the Pen CSS Only dashed lines by Temani Afif (@t_afif) on CodePen.

More CSS Tips