CSS box-shadow Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The box-shadow property adds a shadow to an element. It is allowed to use several shadows, indicating their parameters separated by a comma, when applying shadows, the first shadow in the list will be higher, the last lower. If a round radius is set for an element through the border-radius property, then the shadow will also turn out with rounded corners. Adding a shadow increases the width of the element, so a horizontal scrollbar may appear in the browser.

Need some help with the box-shadow property? If yes, then check out our online CSS Box Shadow Generator to see the box-shadow property being used.

Initial value: none
Applies to: All elements
Inherited: No
Computed value: Any <length> made absolute; any specified color computed; otherwise as specified
Animatable: Yes
JavaScript syntax: object.style.boxShadow

Interactive Demo

box-shadow: 4px 4px 8px purple;

box-shadow: 4px 4px green;

box-shadow: inset 0 0 5px 5px red;

box-shadow: -5px -5px 30px 5px red, 5px 5px 30px 5px blue;

box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;

Example of the box shadow property.

Syntax

box-shadow: none | <shadow> [ , <shadow> ]*

Values

<shadow> = inset? && <length>{2,4} && <color>?

1st <length>Specifies the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.
2nd <length>Specifies the vertical offset of the shadow. A positive value offsets the shadow down, a negative one up.
3rd <length>Specifies the blur radius. Negative values are not allowed. If the blur value is zero, the shadow's edge is sharp. Otherwise, the larger the value, the more the shadow's edge is blurred.
4th <length>Specifies the spread distance. Positive values cause the shadow to expand in all directions by the specified radius. Negative values cause the shadow to contract.
<color>Specifies the color of the shadow. If the color is absent, the used color is taken from the 'color' property.
insetIf present, the 'inset' keyword changes the drop shadow from an outer box-shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner box-shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behindit).

Example

HTML

<div class="shadow">Example of the box-shadow css property.</div>

<div class="shadowinset">Example of the box-shadow css property (inset).</div>

CSS

.shadow { 
   background: #fc0; 
   box-shadow: 0 0 10px rgb(255,0,0); 
   padding: 10px; 
   margin-bottom: 20px;
} 
.shadowinset { 
   background: #fc0; 
   box-shadow: inset 0 0 10px rgb(255,0,0); 
   padding: 10px; 
}

Result

Editor