The box-shadow CSS3 property appends the shadow around an HTML element. You can insert multiple effects separated by commas. A box-shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.
Box-shadow Preview
Preview
Inset?
Generated Box-shadow CSS
-webkit-box-shadow: 7px 7px 5px 0px rgba(255, 255, 238, 0.18);
-moz-box-shadow: 7px 7px 5px 0px rgba(255, 255, 238, 0.18);
box-shadow: 7px 7px 5px 0px rgba(255, 255, 238, 0.18);
-moz-box-shadow: 7px 7px 5px 0px rgba(255, 255, 238, 0.18);
box-shadow: 7px 7px 5px 0px rgba(255, 255, 238, 0.18);
Box-shadow Controls
Box-shadow Color
Box-shadow Distance
Box-shadow Blur
Box-shadow Opacity
Box-shadow Spread
Box-shadow Angle
Follow the box-shadow syntax to add in your project
.className {
-webkit-box-shadow: 7px 7px 5px -44px rgba(66, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px -44px rgba(66, 50, 50, 0.75);
box-shadow: 7px 7px 5px -44px rgba(66, 50, 50, 0.75);
}Browser Compatibility
The modern browsers support the CSS3 box-shadow property, although some older browsers are still using vendor prefixes. It is necessary to use the vendor prefix syntax as users may still be using older versions of the browsers that now support the standard box-shadow syntax.
| Browser | Supports box-shadow? |
|---|---|
| Firefox 4+ | Full support |
| Firefox 3.5 – 3.6 | Supports use of -moz prefix |
| Firefox 1-3 | No |
| Safari 5.1+ | Full Support |
| Safari 3.1 – 5.0 | Supports use of -webkit prefix |
| Chrome 10.0+ | Full Support |
| Chrome 4.0 – 9.0 | Supports use of -webkit prefix |
| IE9+ | Full Support |
| Opera 10.5+ | Full Support |