css - Borders with gradients

Question

I've been stuck for a while trying to get this right:

Notice that there is a gradient in the borders, I tried lots of things to get it done, nothing worked.
Any idea how can I get some kind of gradients like that?

Thanks!

Answer 1

First of all its not gradient border, its the result of using box-shadow css property.

div {
  width: 300px;
  height: 50px;
  background: #222;
  border-radius: 50px;
  box-shadow: inset 0 0 20px #000;
}

<div></div>

box-shadow property takes five arguments. The first one, when left, remains as outset. The second and third are for offset and forth and fifth are spread amount and color respectively.

box-shadow: inset/outset x y spread color;