The CSS3 box-shadow property allows you to easily add multiple drop
shadows (outer or inner) on block elements, specifying values for
offset, size, blur, and color.
How it Works:
- The horizontal offset of the shadow:
- a positive number means the shadow will be on the right of the
box
- a negative offset will put the shadow on the left of the box.
- The vertical offset of the shadow:
- a negative one means the box-shadow will be above the box
- a positive one means the shadow will be below the box.
- The blur radius:
- if set to 0 the shadow will be sharp
- the higher the number, the more blurred it will be.
- The spread radius (optional):
- positive values increase the size of the shadow
- negative values decrease the size.
- Default is 0 (the shadow is same size as blur)
- Shadow color is typically shown as:
- A hex value, such as #000000
- A rgba value, such as (0,0,0,0.5)
Notes:
Shadows do not influence layout and may overlap other boxes or their
shadows. Nor do they trigger scrolling or increase the size of the
scrollable area.
Vendor Prefixes
The box-shadow property is now widely supported by
modern browsers and mobile devices. If you need support older browsers, you may want to use
the vendor prefixes:
css
- .shadow1 {
- -webkit-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
- -moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
- -o-box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
- box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
- }
Learn More
We barely scratched the surface on what you can do with the box-shadow property.
Below are two links to sites that can generate the code for box shadows and allow you
to experiment to get the look you want. The last two links are for inspiration and
show some very cool things you can do.