Q: Make a line with 2 different colors , one in the center and another at the edges enter image description here
I have this kind of a line, I want to make something like this but can't find how to do it . Should I use 2 lines one on another for achieve this effect or can I make it in another way ? I was also looking on linear-gradient , but didn't get the same result . Or it have to be something like different opacity at the edges ?

A: codepen link https://codepen.io/dgknca/pen/KbwxRp


body {
  background:#262626;
  display:flex;
  justify-content:center;
}

.line {
  width:1px;
  height:400px;
  background-image: linear-gradient(to bottom, #262626, #a0a0a0, #262626);
  filter:blur(.8px);
  margin-top:50px;
}
<div class="line"></div>



A: I think you could achieve it by giving a CSS background image with linear-gradient background to an empty div object.
the code will probably look something like this snippet:


.two_colored_line {
width: 100%;
height: 5px;
background-image: linear-gradient(to right, red, yellow, red);
}
<div class='two_colored_line'></div>


you can find more information here: CSS Linear Gradients

A: Here's an option for you... It's a simple line gradient. 


#line-parent {
  width: 50px;
  height: 100vh;
  background-color: black;
  margin: 0 auto;
}

#line {
  height: 98vh;
  width: 3px;
  border: 3px solid black;
  background-color: black;
  margin: 0 auto;
  background-image: linear-gradient(black, grey, black);
}
<div id="line-parent">
  <div id="line"></div>
</div>



A: this is how you can do this with gradient.


.line{height:200px; width:2px; margin:auto; background: linear-gradient(to bottom,#0000001c,#000,#0000001a);}
<div class="line"></div>


