How to Add a Gradient Background in Squarespace
A plain background can work beautifully, but sometimes a section needs a little more color. A Squarespace gradient background lets you blend two shades together, adding depth without filling the page with extra images or decoration.
You might use a soft gradient behind an introduction, a warmer blend around a booking section, or a subtle transition that brings your brand colors into the page.
In this tutorial, you’ll learn how to add a gradient to a section in Squarespace 7.1 using a short CSS snippet. You can place that section on your homepage, a service page, or another suitable layout page. No website plugin is required.
What Is a Gradient Background?
A gradient is a gradual transition between colors. Instead of filling a background with one solid shade, it blends from one color into another.
The example below uses a pale pink at the top and a coral shade at the bottom. You can keep those colors or replace them with your own.
For a professional result, think about the content that sits over the gradient. A background should support your heading, text, and buttons, rather than make them harder to read.
Step 1: Find Your Section ID
Start by choosing the section you want to customize.
Use the Squarespace ID Finder browser extension to locate its section ID. Make sure you choose the section, rather than an individual image or text block.
The selector in this tutorial looks like this:
section[data-section-id="68d96a8db3a5cf6d0c2d8ec6"]The value inside the quotation marks identifies the section. Replace that example value with your own.
If the finder copies the complete selector, use it in place of the example selector. Do not paste a full selector inside the quotation marks.
Step 2: Add the Gradient Background CSS
For the simplest setup, choose a section without a background image or video. Existing media or overlays may cover the CSS gradient.
Open your Custom CSS panel and back up any code already there. Paste the following snippet at the bottom, outside any existing rule, then replace the section ID and save. Squarespace explains the editor and saving process in its Custom CSS guide.
section[data-section-id="68d96a8db3a5cf6d0c2d8ec6"] .section-background {
background-color: #000000;
background-image: linear-gradient(180deg, #fce5e4, #ff7e59) !important;
}This is your original CSS, formatted for readability. Its colors, angle, and behavior are unchanged.
Paste the code directly into Custom CSS without HTML <style> tags. Then view the page outside editing mode to check the result.
This snippet targets one section’s background layer. It does not automatically change the whole page, header, footer, or every block.
Step 3: Change the Colors and Direction
The two color codes inside linear-gradient() control the visible blend:
#fce5e4 is the pale pink starting color.
#ff7e59 is the coral ending color.
180deg makes the gradient run from top to bottom.
The separate background-color: #000000; declaration provides a solid color behind the background image. Because the two gradient colors are opaque, you will normally see the gradient rather than the black beneath it.
Changing only #000000 will therefore not change this pink-to-coral blend. To change the visible colors, edit the values inside linear-gradient().
For example, you can replace just the gradient line with this pale green blend:
background-image: linear-gradient(180deg, #f3f7f0, #c4dbc8) !important;To change the direction, use 90deg for left to right or 0deg for bottom to top. MDN’s linear-gradient reference explains how the angles work.
Step 4: Check the Section on Desktop and Mobile
The gradient fills the background area, so you do not need a separate image file for each screen size.
However, the section may become taller on mobile as the text wraps. That changes how the color transition is distributed behind your content.
Check three things before finishing:
Text contrast: Read every heading and paragraph across the different shades.
Button visibility: Make sure buttons remain distinct from the background.
Section spacing: Check the gradient with your actual content on both desktop and mobile.
This snippet does not change your text colors. If a heading becomes difficult to read, adjust the section’s text styling or choose a lighter or darker gradient.
Can You Use the Same Gradient on Multiple Sections?
Yes. Repeat the rule for each section and change its ID.
For a coordinated design, you might use the same blend behind a homepage introduction and a separate contact section. Keeping the colors consistent can make those areas feel related.
However, each section starts its own gradient again. Applying the same top-to-bottom gradient to several sections will not create one continuous blend across the entire page.
A continuous page gradient needs a different approach to the page background and its section layers. The section snippet above is intended for individual areas you want to highlight.
Other Gradient Styles You Can Try
A linear gradient is a straightforward starting point, but CSS also supports radial and conic gradients. These are browser-rendered CSS effects, rather than separate Squarespace plugins. MDN’s gradient reference.
Radial gradients spread outward from a center point. To try one, replace the existing gradient line with:
background-image: radial-gradient(circle, #fce5e4, #ff7e59) !important;Conic gradients arrange colors around a center point. This optional example returns to the starting color:
background-image: conic-gradient(from 0deg, #fce5e4, #ff7e59, #fce5e4) !important;Use one gradient declaration at a time when comparing these options. None of these examples animates automatically.
For a section with a lot of text, start with a quiet two-color blend. More complex color patterns can work better in decorative areas where they do not compete with important information.
Troubleshooting Your Squarespace Gradient Background
1. The Gradient Is Not Showing
Check that the section ID matches the section you want to change and that you saved the CSS. Keep .section-background after the section selector.
If the ID is correct, check for a background image, video, or another layer covering the gradient. Another custom CSS rule may also be competing with it.
2. The Gradient Looks Darker Than Expected
Review the section’s overlay settings and any existing background effects. These may affect the appearance of the final colors.
Try the gradient on a plain section first. That helps you separate the CSS result from other visual settings.
3. Only One Part of the Page Changes
That is expected. The code targets the section whose ID you entered. To style another section, add a separate rule with its ID.
Changing a section background does not automatically recolor the site header or the sections above and below it.
Frequently Asked Questions
-
No. The snippet creates the gradient with CSS. The ID Finder is a browser extension that helps you identify the section; it does not generate or power the background on your website.
-
One alternative is to create a gradient image and upload it as a section background. Squarespace supports section background images. This can work if you prefer image editing, although you will need to replace the image when changing the colors and review how it crops across devices. Squarespace’s background image guide.
-
The supplied snippet is for a gradient background, not a transparent photo overlay. Its colors are opaque, and an existing image may occupy a separate layer. Combining a visible photo with a gradient requires an overlay or layered-background approach suited to that section.
-
Gradients can be used on other elements, but the selector must target the element you want to style. This code specifically addresses a section background. A button or text block needs its own selector, and its text contrast should be checked separately.
Final Thoughts
A gradient can give a plain section more personality without adding much complexity. Start with two colors that work well together, keep the content readable, and choose a few places where the treatment feels useful.
You do not need a gradient behind every section. A thoughtful background behind an introduction or booking area can be enough to create a more cohesive design.
Building or improving a Squarespace website? Book a free call with me to discuss your website, goals, and the improvements you have in mind. Whether you need a few custom design touches or a complete redesign, I can help you create a professional Squarespace website that reflects your brand and encourages visitors to take action.
