Overpowered CSS3 Drop Shadow

Today you are in for a treat, as I am going to share my never-before published “secret recipe” for a CSS3 drop shadow that is easy to use and sure to wow clients!

2014-04-07 09_30_45-Shapemaker_ Enjoy Shapes

This is actually a technique I adapted from After Effects that I learned from the amazing Video Copilot series, which is free.

The secret to this technique is it is actually two drop shadows.

One, that is a little bit off center.

box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.5);

And the other that is ┬áright behind it, and so faint you almost can’t see it.

box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.3);

2014-04-07 09_23_49-Shapemaker_ Enjoy Shapes

These are actually very easy to combine in CSS3.

box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3), 0px 0px 2px 1px rgba(0,0,0,0.3);

Notice the comma there, that allows you to add as many shadows as you like!

Using that CSS you can create very interesting box shadows that are hardware-accelerated.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>