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;
}