How to make a gradient at the ends of a line, with CSS?

Question

Probably this may be a repeated question, but since I don’t know the name of the effect I can’t find anything on it, the effect I want to do on the edge is exactly the same as the image below:

• How can I do that effect?
• What’s his name?

Answer 1

I would make a div with fixed size, leaving the backgound linear gradient:

HTML

<div class="linha"></div>

CSS

.linha { 
    margin: 10px 0;
    height: 2px;
    background: black;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black));
}

Example:

.linha {
  margin: 10px 0;
  height: 2px;
  background: black;
  background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black));
}

<div class="linha"></div>

Answer 2

Complementing, I would do so mine hr:

hr{
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, transparent, black, transparent);
}

<hr>

I believe it is simpler this solution, now just choose the desired color and put where this the black