Box Shadow CSS Generator
A box-shadow CSS generator that helps you quickly generate box-shadow CSS declarations for your website. It comes with many options and it demonstrates instantly.
FAQS
Collaborate over projects with your team and clients optimised for mobile and tablet don't let slow
A lot of browsers now support the CSS3 box-shadow property, although some are still using vendor prefixes. It is advisable to use the vendor prefix syntax as users may still be using older versions of 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 |
The CSS3 box-shadow property allows you to add depth to your website's design without the need for images or extra container elements.
While the syntax is easy to understand, it is hard to visualise the style using just code. The handy box-shadow tool above allows you to quickly tweak your code and see the effect.
The box-shadow syntax works as follows:
#myDiv { box-shadow: 2px 2px 1px rgba(50, 50, 50, 0.75); }
The first value defines the distance of the box shadow in the x (horizontal) direction and the second value defines the distance in the y (vertical) direction. The third value defines the blur of the shadow and the last value sets the colour. The colour can be specified as a hex code, rgb or rgba value.
Optionally you can include an additional parameter after the blur distance:
#myDiv { box-shadow: 4px 4px 2px 2px rgba(50, 50, 50, 0.75); }
This defines the spread distance of the shadow. This is essentially the distance the shadow extends before it starts to blur. Increasing the spread causes the shadow to extend in all directions.
Finally, you can add the 'inset' keyword at the start in order to apply the shadow to the inside of the box rather than on the outside:
#myDiv { box-shadow: inset -2px -3px 3px 0px rgba(50, 50, 50, 0.75); }