Frosted and Blurry Header (7.1 Version)

7.1 Compatible

Jun 27

Written By Ghost

Featured

The Ghost Team

Submitted This Plugin

Description

Give the header a frosted and blurred style. This plugin uses css editor and works with Squarespace 7.1.

How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Frosted Blur Header //

.header {
   background: rgba(0,0,0,.4) !important;
   box-shadow: 0px 5px 15px rgba(100,100,100,0.3) !important;
   backdrop-filter: blur(12px) !important;
   -webkit-backdrop-filter: blur(12px) !important;
}

// Frosted Blur Header - When Fixed and Scrolling //

.header.shrink {
   background: rgba(0,0,0,.4) !important;
   box-shadow: 0px 5px 15px rgba(100,100,100,0.3) !important;
   backdrop-filter: blur(12px) !important;
   -webkit-backdrop-filter: blur(12px) !important;
}