A frosted glass (glassmorphism) menu adds a blurred, transparent background effect to your Squarespace header, creating a modern floating look.
You’ll get a header that:
- Blurs the content behind it
- Has a semi-transparent background
- Keeps menu text readable
- Works great with image banners and hero sections
Example:
As you can see, the background behind the navigation bar is slightly blurred.
Squarespace now includes a built-in option to create this effect without any coding knowledge.
Open the header color settings
Click Edit → Edit Site Header → Edit Design → Colors.
Enable the blur effect
Enable Blur Background. Then adjust the Blur Amount and Opacity. The opacity must be lower than 100% for the blur effect to work.
On this page