how to draw dashed and solid vertical lines with css gradient

Issue

How to make a CSS background gradient with 90deg lines. Should start with no line, then one solid line, and the next 3 lines dashed.

Solution

You can do it like below:

.box {
  --c: #000; /* color */
  --t: 2px; /* thickness */
  --g: 40px; /* gap */
  --d: 10px; /* control the dashes */
 
  background:
    linear-gradient(90deg,var(--c) var(--t),#0000 0) 0/ calc(4*var(--g)) 100%,
    repeating-linear-gradient(90deg,#0000 0 var(--t),#fff 0 var(--g)),
    linear-gradient(var(--c) 50%,#0000 0) 0/100% var(--d);

  background-clip: padding-box;
  min-height: 100vh;
  border: solid #0000;
  border-width: 0 var(--g);
}


body {
  margin:0;
}

<div class="box"></div>

With transparency like below:

.box {
  --c: #000; /* color */
  --t: 2px; /* thickness */
  --g: 40px; /* gap */
  --d: 10px; /* control the dashes */
 
  background:
    linear-gradient(90deg,var(--c) var(--t),#0000 0) 0/calc(4*var(--g)) 100%,
    conic-gradient(at var(--t) 50%,#0000 75%,var(--c) 0) 0/var(--g) var(--d);

  background-clip: padding-box;
  min-height: 100vh;
  border: solid #0000;
  border-width: 0 var(--g);
}


body {
  margin:0;
  background: linear-gradient(pink,lightblue)
}

<div class="box"></div>

Answered By - Temani Afif