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

Navigation
5

Probably this may be a repeated question, but as I do not know the name of the effect I can not find anything about it, the effect I want to do on the border is exactly the same as the image below:

  • How can I do this?
  • What's his name?
asked by anonymous 20.12.2016 / 15:07

2 answers

4

I would make a div with fixed size, leaving 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>
    
20.12.2016 / 15:14
3

Complementing, I would do so my hr : 

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

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

    
21.12.2016 / 13:08
Error doing push origin master on github How to call different modals, without using a database