how to draw dashed and solid vertical lines with css gradient and transparent colors

Question

I have this css background.

  --c: rgba(84, 110, 122, 0.25) /* color */;
  --t: 1px /* thickness */;
  --g: 1%; /* gap */;
  --d: 5px /* control the dashes */;
           
  background:
    linear-gradient(90deg,var(--c) var(--t),#0000 0) calc(2*var(--g))/calc(4*var(--g)) 100%,
    conic-gradient(at var(--t) 50%,#0000 75%,var(--c) 0) 0/var(--g) var(--d);

The problem I have is that the fourth line should be solid but right now we can see the dashed line at the bottom. How I can't prevent the dashed line at every fourth position to be visible without removing the transparency of the color?

Check the picture

Answer 1

Don't use a transparent color, make all the background transparent by using a pseudo element as background layer and adjust the opacity. Also don't use percentage value with gap, it won't work with the code you are using.

html:before {
  --c: rgba(84, 110, 12) /* color */;
  --t: 1px /* thickness */;
  --g: 10px; /* gap */;
  --d: 5px /* control the dashes */;
  
  content:"";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,var(--c) var(--t),#0000 0) calc(2*var(--g))/calc(4*var(--g)) 100%,
    conic-gradient(at var(--t) 50%,#0000 75%,var(--c) 0) 0/var(--g) var(--d);
  opacity:  0.25; /* the opacity here */
}

html {
  background: linear-gradient(90deg,red,pink);
}