About

This tool creates CSS3 Box Shadows based off of Photoshop Drop Shadow settings. Based off of this great article, I decided to adapt it into this tool for the rest of us who still do things the "old school" way.

Melanie Ceraso
Web Designer/Front-end Developer
Minneapolis, Minnesota

29 Jan 2013 Update
Photoshop Drop Shadow Structure
R
G
B
%
°
px
%
px
Do all the Maths!
CSS3 Syntax
No Yes
px
px
px
px

CSS3 Code

box-shadow: offset-x offset-y blur-radius spread-radius rgba(0, 0, 0, opacity) inset;
text-shadow: offset-x offset-y blur-radius rgba(0,0,0 opacity);
box-shadow: offset-xpx offset-ypx blur-radiuspx spread-radiuspx rgba(0, 0, 0, opacity) inset;
text-shadow: offset-xpx offset-ypx blur-radiuspx rgba(0, 0, 0, opacity) inset;