Box shadow circle

Question

I want to make shadow in circle like this

I have tried this:

width: 50px;
height: 50px;
background-color: #e65525;
border-radius:50%;
box-shadow: 3px 3px 3px #e78267;

but it's doing not that what i need. how can I improve that?

JSFIDDLE

Answer 1

I'd suggest:

div {
    width: 50px;
    height: 50px;
    background-color: #e65525;
    border-radius:50%;
    box-shadow: 0 0 0 3px #e78267;
}

JS Fiddle demo.

The problem you had was in your box-shadow: 3px 3px 3px #e78267; line, in turn:

• 3px (the first) is the horizontal offset,
• 3px (the second) is the vertical offset,
• 3px (the third) is the 'blur' distance.

I've changed that to box-shadow: 0 0 0 3px #e78267;, because:

• a zero offset (for both horizontal and vertical) means the shadow is centred around the shape itself,
• the third zero provides a blur distance of 0, annd
• the 3px gives a 'spread' (so you that a solid 'shadow' is given, rather than a blurred shadow).

References:

• box-shadow (MDN: CSS).
• box-shadow (W3.org.