How to Add a Shadow to Section Dividers in Squarespace

Enhancing the visual appeal of your website on Squarespace can be straightforward and impactful. One effective way is by adding shadows to section dividers. This not only makes the transitions between sections more dynamic but also adds depth to your layout. In this tutorial, we'll guide you through the simple steps to apply a shadow effect to your Squarespace dividers.

Watch the Video

Check out the YouTube video below 👇

Step-by-Step Guide

1. Accessing Custom CSS Begin by navigating to your Squarespace site's custom CSS editor. This is where you'll input the specific code to create the shadow effect.

2. Using the Squarespace ID Finder It's essential to identify the correct section divider where you want the shadow to appear. Use the Squarespace ID finder to select the ID of the lower section of the divider—this ensures that the shadow applies correctly at the top of your chosen section.

3. Inserting the CSS Code Copy the CSS code provided (you'll find this in the description below or within this blog post). Paste this code into your custom CSS editor. Here’s a basic example of what the code might look like:

   section[data-section-id]

   {

   filter: drop-shadow(0px 10px 100px purple

   );

   }

   X-offset: Controls horizontal shadow displacement. Default is 0 for no horizontal shift.

   Y-offset: Adjusts vertical shadow position.

   Blur: Determines the blur amount of the shadow, enhancing the depth.

   Color: Modify this to change the shadow’s color to fit your design, using hex codes or standard color names.

4. Customization Tips: Experiment with different values for the X and Y offsets, the amount of blur, and color options to customize the shadow to match your aesthetic preference. For instance, increasing the blur spreads the shadow wider, creating a softer effect.

Adding a shadow to section dividers in Squarespace is an easy yet powerful way to upgrade your site's appearance. Play around with different settings to find what best suits your style, and don't be afraid to get creative with colors and intensity.

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