Tools to Help.


Squarespace CSS Code Snippets.

Angled Banner

/*ANGLED BANNER*/
#your-url-slug::before {
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(177deg, rgba(255, 255, 255, 0) 87%, #fcfcfc 87.2%);
  position: absolute;
  top: 0;
  left: 0;
}

Half Banner

/*HALF BANNER*/
#your-url-slug::after {
  content:'';
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, 0) 50%);
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 640px) {
  #your-url-slug::after {
    background: rgba(255, 255, 255, 0.9);
  }
}

Floating Index Sections

/*FLOATING INDEX SECTIONS*/
#your-top-section-url-slug::before {
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #ebebeb 70%, rgba(255, 255, 255, 0) 70%);
  position: absolute;
  top: 0;
  left: 0;
}
#your-bottom-section-url-slug .Index-page-content {
  padding-top: 0;
}