CSS3 Box Shadow Generator Makes Shadows in CSS EasyYou can use this CSS3 Box Shadow Generator tool to set the shadow style on a box element then copy the generated CSS into your website.
The CSS box-shadow
property is used to apply one or more shadows to an element and can be used to highlight or emphasise an element, provide depth to designs and provide visual feedback.
There is no need to be concerned about box-shadow
browser compatibility. It's a well-known CSS property that's supported by almost every browser, supporting syntaxes like inset and multiple shadows.
Using the options below you can customise the look and feel of the box drop shadow. You can then copy and paste the generated CSS3 Box Shadow code into your stylesheets.
CSS3 Box Shadow Generator
Copy this CSS3 drop shadow code into your stylesheet
Box Shadow Generator Options
You can change these options to control how the CSS3 drop shadow appears on the page.
px | |
px | |
px | |
px | |
% |
CSS3 Box Shadow Explained
The CSS3 Box Shadow property allows web designers to design drop shadows for any box element, using values for colour, size and offsets.
The box-shadow property can be assigned through comma separation to specify the horizontal offset, vertical offset, optional blur distance and optional spread distance of the shadow.
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
CSS3 Box Shadow Browser Compatibility
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.
Property | |||||
box-shadow | 10.0 4.0 -webkit- | 9.0 | 4.0 3.5 -moz- | 5.1 3.1 -webkit- | 10.5 |