CSS3 Drop Shadows Generator 0.12

For designers - For learning CSS3 - To try some experiments

1. Choose a shadow


There is currently 10 different shadow styles for you to play with. And I add new ones on a regular basis. Each shadow is build exclusively with some CSS3 properties, no images used.

2. Tweak the shadow and/or the box


For each shadow, the generator let you customize a lot of stuff, some CSS like box-shadow, transform, etc, the width, height and position of the shadow and many other things.

3. View changes in real time


The generator changes the shadow in real time, as you play with the sliders.

4. (Re)generate the css code


When your shadow looks good, hit the button to generate the CSS and Sass code. You can now copy/paste it to add a nice CSS3 shadow on your website.

5. Start designing now

Go to app