How to add a gradient background to a section with CSS (Squarespace 7.1)

Pin it! How to add a gradient background to section with CSS (Squarespace 7.1)

PIN TO SAVE FOR LATER!

 

Adding a gradient to your website can create a visually appealing focal point, making your content more engaging and memorable.

In this tutorial, we'll show you how to add a gradient background to any section of your site. Gradients are a versatile and eye-catching design element that can elevate the visual appeal of your web pages.

Example of gradient background:

Tutorial: example of gradient
 

Here’s what you need to know before getting started.


How to find Section ID’s:

Section ID’s target a specific section on your website.

Here is an example: section[data-section-id="653004cc58845e250c7f3bb0"]

To identify a section:

  1. Add this Google Chrome extension to your browser

  2. Open your website

  3. Click the grid icon on the top right corner to enable the extension.

  4. You will immediately see the red and blue blocks for the sections/blocks on your website

  5. Click on the blue sticker on the top left of the section you want to target and the section ID will automatically be copied to your clipboard

Block ID Finder Example
 

Next steps:

Add custom CSS

  1. From your Squarespace dashboard, go to: Website > Scroll down to Website Tools > Custom CSS

  2. Copy and paste the CSS below

  3. Replace section[data-section-id="653004cc58845e250c7f3bb0"] with the section ID that is copied to your clipboard

  4. Update “background-color” (#000000) to HEX color of choice

  5. Update “background-image” HEX codes for the gradient start point and end point

    Example:

    For a white to black gradient, replace #fce5e4 to #ffffff

    Then replace #ff7e59 to #000000

// GRADIENT SECTION BACKGROUND

section[data-section-id="653004cc58845e250c7f3bb0"] .section-background {
  background-color: #000000;
  background-image: linear-gradient(180deg, #fce5e4, #ff7e59) !important;
}

IMPORTANT NOTE:

You can change the direction of the gradient by updating 180deg but make sure to leave the comma (For example: 90deg, instead of 180deg,)

90 degree gradient example

EXAMPLE OF GRADIENT SET TO 90deg

 

All set!

USE DISCOUNT CODE STYLEDSQUARE10 TO SAVE 10% OFF YOUR SQUARESPACE SUBSCRIPTION

* Disclaimer: This post contains affiliate links. We may earn a commission should you chose to sign up for Squarespace using our link. Affiliate links are a great way to show your support for our content with no additional cost to you!

 

More Squarespace tutorials

Previous
Previous

How to add rotating text to your Squarespace 7.0 & 7.1 website

Next
Next

How to Add Videos to Image Blocks in Squarespace (No Coding Required!)