Adding a Shadow Box to your Squarespace website images is a simple CSS trick that will add style and class to any website.

*** We specifically targeted all blog post images with this code but you can apply to single images by using the block id or target specific collections using the css selector ***

Before we get started, here’s what the Shadow Box code looks like in action: 

Follow the steps below to create a shadow box effect on your Squarespace website.

Step 1: Copy the Shadow Box Code

// Add Shadow Box to Squarespace Blog Post Images

.blog-item-wrapper .image-block {

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.11);

}

Step 2: Paste the Code

Go to Design –> Custom CSS and enter the custom code for Shadow Box Blog Post Images. 

The code will be applied to all images on your Blog post pages.

That’s it!

Coding doesn’t have to be overwhelming. We’re here if you need additional help.

Interested in a Custom Website?

We’d love to be of service.