Let’s look at the CSS syntax for the CSS3 Box Shadow :
1 | 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.
Background
Inset
.element {
-moz-box-shadow: 3px 3px 3px 3px rgba(209,209,209,1);
-webkit-box-shadow: 3px 3px 3px 3px rgba(209,209,209,1);
box-shadow: 3px 3px 3px 3px rgba(209,209,209,1);
}