How Do You Add a Squarespace Gradient Background?

A Squarespace gradient background is one line of CSS: find the section’s ID, then in Website, Website Tools, Custom CSS add section[data-section-id="YOUR-ID"] .section-background { background: linear-gradient(135deg, #f7e9d7, #f3500f) !important; }. Squarespace’s own section settings offer solid colours and images but no gradient control, so every gradient on a Squarespace site is either CSS, a gradient image uploaded as a background, or Squarespace’s built-in Background Art on 7.1 block sections, which offers patterns but not a true two-colour gradient. This post gives the CSS for a single section, the whole site, buttons and text, the image method for people who would rather not touch code, and the settings that keep text readable and the mobile view sane.

How do you add a Squarespace gradient background to one section?

1. Find the section ID with the Squarespace ID Finder extension or Inspect; it is the data-section-id value on the section element.
2. Open Website, Website Tools, Custom CSS.
3. Paste and edit the colours and angle:

section[data-section-id="YOUR-ID"] .section-background {
  background: linear-gradient(135deg, #f7e9d7 0%, #f3500f 100%) !important;
}

Set the section’s own background to a solid colour close to one end of the gradient first (Edit Section, Colors), so that if the CSS ever fails the section still looks intentional. The .section-background target is the same one Spark Plugin and The Styled Square use in their versions; !important is needed because Squarespace sets the background colour inline.

What gradient options are there?

For a gradient over a background image, keep the image set in the section settings and stack the gradient on top:

section[data-section-id="YOUR-ID"] .section-background::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.65) 100%);
}

How do you apply a gradient to the whole site, the header or a button?

• Every section: .page-section .section-background { background: linear-gradient(...) !important; }. Usually too much; gradients work best as an accent.
• Site background behind sections: body, #siteWrapper { background: linear-gradient(...) }, visible where sections are set to transparent.
• Header: .header { background: linear-gradient(...) !important; } with the header’s own colour set to transparent in Edit Site Header; watch the fixed header on scroll.
• Buttons: .sqs-button-element--primary { background: linear-gradient(90deg, #f3500f, #ff8a3d) !important; border: none !important; }, plus a hover state from the button colour guide.
• Text: h1 { background: linear-gradient(90deg, #a, #b); -webkit-background-clip: text; color: transparent; }. Striking for one headline; unreadable as a habit.

The no-code method: a gradient image

1. Make a gradient in Canva, Figma or any image tool at 2500 x 1400 pixels, export as JPG at quality 80 (gradients compress well, usually under 100 KB).
2. Edit Section, Background, Image, upload it.
3. Set the focal point to the centre and check the mobile crop.

Squarespace serves it like any image, so it costs a little load time, and the crop changes between screen sizes as any banner or section background image does. CSS gradients cost nothing and never crop, which is why they are the better answer for anyone willing to paste one line.

How do you keep text readable on a gradient?

• Pick the section colour theme for the darkest end. If the gradient runs from cream to orange, use the Light theme and make sure text sits over the cream half, or add the dark fade so white text works over the orange.
• Check contrast at both ends with a contrast checker; a gradient that passes on the left can fail on the right.
• Keep the angle consistent across sections that use gradients; mixed angles look accidental.
• Test mobile. A 135deg gradient on a tall phone screen becomes almost vertical; if the effect matters, add a mobile override: @media (max-width: 767px) { section[data-section-id="YOUR-ID"] .section-background { background: linear-gradient(180deg, #a, #b) !important; } }.

Which sections should get a gradient?

Two or three per site: the hero, a call-to-action band, and perhaps the footer. Gradients read as an accent when they are rare and as a template when every section has one. Keep one angle and one colour family across all of them, and let the sections between stay flat so the gradient ones stand out. A good test is to squint at the page: the gradient sections should be the ones your eye lands on, and they should be the ones with the button.

Why is the gradient not showing?

Gradients are a two-minute upgrade that stops a template site looking like one, alongside the vertical line and the other snippets in the CSS cheat sheet; the discipline on any Squarespace design is one gradient family, used on two or three sections, not every one.

Frequently asked questions