CSS3 Drop Shadows Generator 0.12

For designers - For learning CSS3 - To try some experiments

1. Choose a shadow

Drop-shadows-generator-1

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

Drop-shadows-generator-2

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

Drop-shadows-generator-3

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

4. (Re)generate the css code

Drop-shadows-generator-4

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