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 👇
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.
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.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.