CSS Inset Shadow Image

CSS Inset Shadow on Image

Adding a drop shadow to a div is pretty straight forward.

box-shadow: horizontal offset, vertical offset, blur*, spread*, color;
OR
box-shadow: 5px 5px 20px 4px #000;

I like to use rgba color though: rgba(red, blue, green, alpha)

Which looks like this:
box-shadow: 5px 5px 20px 4px rgba(0,0,0,0.9); // 90% alpha here

Doing this is similar to the normal box shadow behavior except for the word “inset” at the beginning.

Insetting is done like this:
box-shadow: inset 5px 5px 20px 4px rgba(0,0,0,0.9);

CSS Inset Shadow Image
Example of what I am looking to accomplish.

Placing this behavior over an image is a little trickier though. To accomplish this I need a wrapping div to apply the drop shadow to. In this case I was wanting a transparent highlighted border, but this concept can be used for drop shadows as well.

 

See the Pen CSS Inset Highlight on Image by Jeff Rainey (@rainey) on CodePen.

Leave a Reply

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