CSS Box Shadow Generator

What is This tool?

It is a simple CSS box-shadow generator that allows you to easily create effects visually using a GUI interface.

The CSS box-shadow property is a really good way to add depth to the look of your website when used is the right way, primarily because it is native to all modern browsers, also because the syntax is nice and clean.

box-shadow: 10px 10px 5px 0px #333;

The above is a typical example of the CSS box-shadow syntax. The properties are as follows from left to right:

• X-axis for shadow distance - horizontal position
• Y-axis for shadow distance - vertical position
• Blur - the blur radius of the shadow
• Spread - the spread distance of the shadow
• Colour - this can be an rbg, rbga or hex value

A sixth optional property can also be added at the beginning:

box-shadow: inset 10px 10px 5px 0px #333;

As the name suggests, inset shifts the entire box-shadow so that it goes inwards inside the element.

While most of the newest versions of browsers will support just using the "box-shadow:" initiator, some older versions will require you to add the "-webkit-box-shadow:" or "-moz-box-shadow:". While this is being phased out it is still worth putting in there for users who have been living under a rock and not updated their systems.

Box-shadow browser support