How to add an image block drop shadow to a Squarespace site

This tutorial will walk you through the process of adding a drop shadow effect to an image block on your Squarespace website. Whether you're using Squarespace 7.0 or 7.1, the code provided in this tutorial will work seamlessly for both versions. By following the steps outlined, you'll be able to enhance the visual impact of your images on your Squarespace site by adding a stylish drop shadow effect.

Complexity: Easy


Step 1: To add an the image block drop shadow, simply copy the code below:

// Image Block Drop Shadow // 
.image-block {   
filter: drop-shadow (3px 4px 6px #FFBF00); 
}

Step 2: From your Squarespace account, go to the Custom CSS Editor. paste the code into the Custom CSS editor box.

You can then adjust the drop shadow px sizes and color to your liking.



Primitus Consultancy

We work with small and medium-sized businesses to help create a professional online presence. We provide a one shop full-service design studio in London, United Kingdom. 

https://primitusconsultancy.co.uk
Previous
Previous

How to add an image block drop shadow on hover to a Squarespace site

Next
Next

How to add a drop shadow to the horizontal line on a Squarespace site