How to Add a Shadow to a Line on Squarespace

Are you looking to enhance the design of your Squarespace website? Adding shadows to lines can give your website a polished and professional look. In this tutorial, we'll guide you through the process of adding shadows to lines on Squarespace effortlessly.

Watch the Video

Check out the YouTube video below 👇

Step 1: Adding the Line Block

To begin, navigate to the section where you want to add the line block on your Squarespace website. Click on "Add Block" and search for the "Line" block. Once selected, hit "Save" to add the block to your page.

Step 2: Inserting Custom CSS

Now, it's time to add the shadow effect to your line. We'll provide you with a simple CSS code snippet that you can copy and paste. This code snippet will create the shadow effect for your line. Simply copy the code provided in the description below the video and paste it into the Custom CSS section of your Squarespace editor.

.sqs-block-horizontalrule hr {

box-shadow: 0px 3px 5px 0px #333;

}

Step 3: Customizing the Shadow

Once you've added the CSS code, you can customize the shadow effect to suit your preferences. Here are the key parameters you can adjust:

Shifting the Shadow: You can adjust the horizontal and vertical positioning of the shadow by modifying the values in the CSS code.
Changing the Spread: Alter the spread of the shadow to control how far it extends from the line.
Adjusting Line Thickness: Customize the thickness of the line to achieve the desired effect.
Choosing the Shadow Color: Select a color for the shadow that complements your website's design. You can easily change the color to match your branding or aesthetic preferences.

Step 4: Preview and Save

After customizing the shadow effect to your liking, preview your changes to ensure they align with your design vision. Once you're satisfied with the result, save your changes to make the shadow effect live on your Squarespace website.

Adding shadows to lines on Squarespace is a simple yet effective way to elevate the visual appeal of your website. Experiment with different shadow settings to find the perfect combination that enhances your site's design. With this easy-to-follow tutorial, you'll be able to add stylish shadows to your lines in no time.

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