How to create a frosted glass header in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

Check out this video tutorial to learn how to install these codes step by step to create a frosted glass header in Squarespace!

Below is the code from the tutorial to create the frosted look for your website header.

Play around with the background color (rgba) and blur (5px in the code below) to make it unique for your site design!

Version 7.1 Code

.header-announcement-bar-wrapper{
background: inherit!important;
background-color: rgba(255, 255, 255, .3)!important;
backdrop-filter: blur(5px)!important;
}

Brine Code

.Header {
background: inherit!important;
background-color: rgba(255, 255, 255, .3)!important;
backdrop-filter: blur(5px)!important;
}

Bedford Code

#header { background: inherit!important;
background-color: rgba(255, 255, 255, .3)!important;
backdrop-filter: blur(5px)!important;
}