How to Add a Shadow to a Shape in Squarespace

First impressions are crucial, adding depth to your website elements can significantly enhance user experience. Today, we'll dive into a simple yet impactful design trick: adding a shadow to shapes. This technique is not just about aesthetics; it's about making sections like services, pricing tables, and more stand out. Ready to give your site an edge? Let's get started.

Watch the Video

Check out the YouTube video below 👇

Starting Off with Shapes

First off, you'll need to navigate to the section where you want to add a shape. If you're new to Squarespace, here's how to do it:

1. Create a Block: Click on an area where you'd like to add a new block.

2. Select 'Shape': Find and click on the 'Shape' option. Once you do, your shape will appear.

Remember to save your changes before exiting.

Diving into Custom CSS

To add a shadow, you're going to need to tweak some code. Don't worry; it's simpler than it sounds:

1. Access Custom CSS: From your site's home menu, click 'Design' and then 'Custom CSS'.

2. Insert the Code: Below, you'll find the CSS code necessary to add a shadow. Simply copy and paste it into the Custom CSS field.

.sqs-shape{

filter:drop-shadow(5px 5px 5px #333)

}

With this code, your shapes will now have a visually appealing drop shadow, adding depth and emphasis to your selected elements.

Fine-Tuning Your Shadow

The beauty of custom CSS is that you can adjust the shadow to fit your exact needs. Here are the parameters you can play with:

• Horizontal Position: Control the shadow's left-right position. Setting it to zero centers it, but you can adjust as needed.

• Vertical Position: This adjusts the shadow's up-down placement. Again, zero centers it, but feel free to experiment.

• Blur Radius: Want a sharper or more diffused shadow? Increase or decrease the pixel (px) value to adjust the blur intensity.

• Color: Customize your shadow's color by inserting a hex code or simply typing the color name (e.g., purple).

The key to mastering this effect is experimentation. Adjust the shadow's direction, blur, and color until you achieve the desired effect. Whether it's a subtle touch or a standout feature, the right shadow can significantly enhance your site's visual appeal.

Adding a shadow to shapes in Squarespace is a straightforward process that can dramatically improve your site's aesthetics. By following the steps outlined above, you can add depth to your images and sections, making your site more engaging and professional-looking. Remember, the possibilities are endless, and with a little creativity, you can elevate your website's design to new heights.

Your Designer

I’m Wesley, a Squarespace website designer. I’ve created amazing websites for multiple clients across different industries from Education sites to Wellness brands to Accounting Firms. If you’re looking for a website and want to discuss a potential project, email me at wesley@websleydesign.com. You can also schedule a free 15-minute consultation call