Skip to main content

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*/

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.