Add a Drop Shadow to Header on Squarespace

One of the best Squarespace updates from last year is the new features available when editing site headers, in particular the ability to add a drop shadow to a header.

Previously this could only be done using custom code, but not any more.

Watch the video

Check out the YouTube video below 👇

Six Figure Design Club framework for designing a perfect homepage

Want a framework for designing the perfect homepage?

To add a drop shadow to your site header within your edit dashboard select Edit Site Header.

Edit site header on Squarespace

Within the edit panel that appears select Style and you’ll need to select either a Gradient or Solid style. These are currently the only two header styles that allow you to add a drop shadow natively.

Once you’ve selected your style, scroll down to Drop Shadow and toggle this to on. You can then edit your drop shadow, changing the colour, spread, distance and blur to achieve the effect you want.

Have a play around with the sliders in order to create the drop shadow you want and once you’re happy, hit save.

I really like adding drop shadow to my site headers, I think it adds some important depth to a page and helps to make the user aware that the header is still there as they navigate around the website.

book a call with sam crawford squarespace expert

Need an expert to build your Squarespace website?

Book a free kick-off call with our team to discuss your project requirements in detail.

Previous
Previous

Add Hover Effects to Text Links on Squarespace [EASY CSS TRICKS]

Next
Next

How to Upgrade Your Squarespace Hosting Subscription