Adding a Drop Shadow to Images Using CSS

This quick tutorial will show you how to add what is called a “Drop shadow” to images on your site. A quick video, I walk you through how to change the color of the shadow and how to turn it into a hover effect, prompting it to show when a cursor is over the image. Watch the quick tutorial and when you are ready, grab those copy + paste CSS codes below!

 
 

This custom CSS code will add a drop shadow to images:

.image-block {

filter: drop-shadow(5px 5px 8px #000000);

}

This CSS code will add a drop shadow to images on a hover:

.image-block:hover {

filter: drop-shadow(5px 5px 8px #000000);

}


SUPER IMPORTANT SIDE NOTE

All Squarespace sites are built using a specific theme family, and that means not all elements are called the same thing behind the scenes. When working in CSS it is important to identify the initial symbol that your CSS code needs to work with an element. If this is going over your head, don’t worry! It really isn’t as complicated as it sounds. When using code, the very first symbol can help the system figure out what you are asking it to do. Some theme families use a pound symbol, or hashtag if you were born after 1985 ( # ) while others use a period ( . ) Brine is a common family that uses ( . ) while Bedford templates generally use ( # ) If your CSS code isn’t working the way you want it to, the first thing you can do to troubleshoot that would be to see if changing the symbol can make it work.

If you are still pretty new to CSS, this is something I cover in my free Getting Started with CSS guide. Definitely check it out if you are curious about CSS or code in general: