Web Design that taps into the haromny and vision of your dreams.

CSS3 Box Shadow Generator

A box-shadow CSS Generator tool to quickly generate box-shadow CSS declarations.

Written By on in HTML/CSS

177 words, estimated reading time 1 minutes.

You can use this CSS3 Box Shadow Generator tool to set the drop shadow style on a box element. Set the values, watch the sample update in real time, then copy the generated CSS3 box-shadow code into your website.

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

Copy this CSS3 drop shadow code into your stylesheet


You can change these options to control how the CSS3 drop shadow appears on the page.


CSS3 Box Shadow Explained

The CSS3 Box Shadow property allows web designers to design drop shadows for any box element, using values for color, size and offsets.

The box-shadow property can be assigned through comma separation in order 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.

4.0 -webkit-
3.5 -moz-
3.1 -webkit-

Last updated on: Wednesday 27th June 2018



There are no comments for this post. Be the first!


Leave a Reply

Your email address will not be published.

If you find something abusive or that does not comply with our terms or guidelines please flag it as inappropriate.

Copyright © 2001-2018 Tim Trott, all rights reserved. Web Design by Azulia Designs

This web page is licensed for your personal, private, non-commercial use only.

Disclaimer, Privacy & LegalSitemapContact Me