CODEWITHSUNDEEP
htmlcss
JMz
JMz

Reputation: 71

css - Borders with gradients

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

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!

Upvotes: 0

Views: 78

Answers (1)

user8003769
user8003769

Reputation:

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;

Upvotes: 1

Related Questions