Add a drop shadow to list page items in squarespace 7.1

Are you looking to create a unique product list stlye on squarespace website? I have been playing around with list items on squarespace and was looking to create a box shadow border with a rounded radius.

Here’s the quick and simple piece of CSS code you need to make your list items a little more stand out!

Add the below code to your custom css. Go to > Design > Custom CSS and paste the code. Don’t forget to hit save! If you prefer to not have a border stoke simply remove the line below (in bold)

---

CSS code for squarespace 7.1

//List styling shadow & border

.list-item {

border: solid 2px #795586 !important;

border-radius: 10px;

box-shadow: 1px 5px 8px 3px rgba(0,0,0,0.2);

}

---

Did I help you? Consider buying me a coffee as thanks!

I hope you found this guide useful. For more useful CSS code tricks take a look at my blog