Cool drop shadows with CSS

I remember the old days before CSS was widely used. They were dark days, indeed. When you wanted to place a drop shadow behind a photo on your website, you didn’t have a lot of choices except to place the drop shadow on the photo in Photoshop, and hope that the background matched. We’ve come a long way since then.

Not only can you place a drop shadow behind an object with the box-shadow property in CSS, you can go even further with different drop shadow effects and a little CSS magic.

I found a great little CSS drop shadow generator from ThemeShock. You simply choose the effect you want, choose the amount of blur, the opacity of the shadow, etc, and the site will create the CSS code necessary to create that effect.

All of this being said, I must point out that while I am a fan of the CSS drop shadow, current design trends, such as flat design and material design currently frown upon drop shadows. But don’t worry, drop shadows will be back in style within a year or two, and you’ll be ready!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.