Gradient Colour Theme Backgrounds
in Squarespace 7.1

Question:
We are on SquareSpace 7.1. I wonder if it's possible to modify the code so that one 'colour theme' can have gradient background each time we apply that colour theme.

- Orapan

This video is my response.

See the code

Note: one thing I didn’t mention in this video is that if you want to change your primary color theme to gradient, the css is a little different. To change the primary color them, check out the first option below.

Gradients are an awesome way to add different little pop to your website to get out of the norm of standard websites out there. I will caution against overusing them as it can make a website difficult to read sometimes, but when gradients are applied appropriately, they look great. If you’re looking for an in-depth review of gradients in CSS check out this article.

Let’s quickly break-down a linear gradient property in plain English. Here is the example we’ll use:

  background-image: linear-gradient(
    to right, 
    white 0%, 
    brown 100%
  )

Apply a background image with a linear gradient. Start the gradient on the left side and move to the right. Apply a color of white at a position 0% away from the starting position (all the way left) and blend it with brown at a position o f 100% away from the starting position (all the way right).

Of course, best way to understand these things is to just add them to your site and play around.

Below are my high-level “things to remember” when using gradients.

Gradients in CSS are set as a background-image, not background or background-color.

The linear-gradient() property usese parenthesis and you can add line breaks after the parenthesis to help make your code more readable (see example below)

    The first value called within the linear-gradient() parenthesis is the direction. The linear-gradient() can take plain language as its value here and that's what I use 99% of the time. (ex: "to right", "to left", "to top left", "to bottom right")
  
    You can add as many colors & percentages as you like, just make sure each percentage progresses higher.

Change your...

PRIMARY COLOR THEME TO GRADIENT

:not(.has-background) .section-background {
  background-image: linear-gradient(
    to right, 
    white 0%, 
    brown 100%
  )
}

White Minimal Color Theme to Gradient

.white:not(.has-background) .section-background {
  background-image: linear-gradient(
    to right, 
    white 0%, 
    brown 100%
  )
}

White Bold Color Theme to Gradient

.white-bold:not(.has-background) .section-background {
  background-image: linear-gradient(
    to right, 
    white 0%, 
    brown 100%
  )
}

Light Minimal Color Theme to Gradient

.light:not(.has-background) .section-background {
  background-image: linear-gradient(
    to right, 
    white 0%, 
    brown 100%
  )
}

Light Bold Color Theme to Gradient

.light-bold:not(.has-background) .section-background {
  background-image: linear-gradient(
    to right, 
    white 0%, 
    brown 100%
  )
}

Dark Minimal Color Theme to Gradient

.dark:not(.has-background) .section-background {
  background-image: linear-gradient(
    to right, 
    white 0%, 
    brown 100%
  )
}

Dark Bold Color Theme to Gradient

.dark-bold:not(.has-background) .section-background {
  background-image: linear-gradient(
    to right, 
    white 0%, 
    brown 100%
  )
}

Black Minimal Color Theme to Gradient

.black:not(.has-background) .section-background {
  background-image: linear-gradient(
    to right, 
    white 0%, 
    brown 100%
  )
}

Black Bold Color Theme to Gradient

.black-bold:not(.has-background) .section-background {
  background-image: linear-gradient(
    to right, 
    white 0%, 
    brown 100%
  )
}

Accent Minimal Color Theme to Gradient

.bright:not(.has-background) .section-background {
  background-image: linear-gradient(
    to right, 
    white 0%, 
    brown 100%
  )
}

Accent Bold Color Theme to Gradient

.bright-inverse:not(.has-background) .section-background {
  background-image: linear-gradient(
    to right, 
    white 0%, 
    brown 100%
  )
}

Gradient Colour Theme Backgrounds in Squarespace 7.1