CSS Tip

Dashed lines using CSS gradient

Create dashed lines using only one gradient

A background with dashed lines

html {
  --c: #333; /* color */
  --t: 2px;  /* thickness of the lines */
  --g: 50px; /* gap between lines */
  --s: 12px; /* size of the dashes*/
  
  background:
    conic-gradient(at var(--t) 50%,#0000 75%,var(--c) 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