CSS3 Box Shadow & Online Generator

Written by Saran on September 11, 2013, Updated October 12, 2015

All modern browsers now support CSS3 effects, all we need is one line of CSS to achieve smooth drop shadow effect from HTML block elements, no more Photoshop images! Some older browsers like Firefox 4, Safari 5.1 or Chrome 10 still requires vendor prefixes for this to work. Let's look at the CSS syntax for the CSS3 Box Shadow :

CSS


element {inset <offset-x> <offset-y> <blur-radius> <spread-radius> <color>}

Inset : This value is optional, if specified it will cause drop shadow to cast inside of the element, rather than outside.
Offset-x : The positive values cast the shadow to the right and negative values place the shadow to the left of the element.
Offset-Y : The positive values cast the shadow to the bottom or negative values means to the top of the element.
Blur-radius : Higher values means more shadow blur, 0 is the sharpest.
Spread-radius : Increase the size of the drop shadow.
Color : Specify the color of the drop shadow (HEX, RGBA, HSL, HSLA).

Box Shadow Generator

Below is the CSS3 Box Shadow generator for you to play around, and when you are satisfied with look, just copy and paste CSS3 code generated by this tool to your project.

Horizontal

Vertical

Blur

Spread

Background

Inset