3 Ways to Add Custom Gradients in Squarespace (Copy & Paste CSS)
Squarespace gives you a beautiful and flexible canvas to build your site — but when it comes to gradients, it falls a bit short out of the box. You won’t find built-in settings to create gradients for your text, buttons, or background sections. But the good news? You can absolutely add custom gradients in Squarespace with just a few lines of CSS.
Whether you're a beginner or you’ve never touched code before, this step-by-step tutorial will walk you through three easy ways to add gradients using copy-and-paste CSS. You’ll learn how to apply gradients to:
Buttons
Text Headings
Section Backgrounds
Let’s dive into the first one — adding a gradient to your buttons.
Where to Paste Custom CSS in Squarespace
Before we begin styling anything, let’s make sure you know where to put the code.
Log in to your Squarespace website dashboard.
Click Design > Custom CSS.
Paste your CSS code into the box that appears.
Everything we cover in this post will be added to that Custom CSS panel , and you’ll see the changes in real time.
Squarespace Button Styles: A Quick Overview
Squarespace allows for three types of buttons: Primary, Secondary, and Tertiary. Depending on your template and style settings, they each have different uses — but we’ll focus on customizing the Primary Button in this example. Here’s how you identify and target it in CSS.
Primary - .sqs-button-element--primary
Secondary - .sqs-button-element--secondary
Tertiary - .sqs-button-element--tertiary
How to Add a Gradient to a Button in Squarespace
Ready to get your hands dirty (just a little)? Let’s walk through how to apply a custom gradient background to your Squarespace button using CSS.
Step 1 – Create Your Gradient
Instead of guessing color values, use a free tool like CSS Gradient to generate your gradient code. You can:
Select two or more colors
Adjust the angle and style
Copy the generated CSS
Once you’re happy with your color blend, copy only the part of the code that starts with background:. It might look something like this:
background: linear-gradient(135deg, #a4508b, #5f0a87);
Step 2 – Paste Your CSS in Squarespace
Now go back to your Squarespace Custom CSS panel and add this snippet. The !important tag is crucial — it tells Squarespace to override any default styles it’s using for buttons.
.sqs-block-button-element--primary {
background: linear-gradient(135deg, #a4508b, #5f0a87) !important;
}
Step 3 – Test and Adjust
Click Save, refresh your site, and take a look at your primary buttons. They should now show the custom gradient. Want to apply different gradients to secondary or tertiary buttons too? Just replace the selector accordingly:
/* For secondary buttons */
.sqs-block-button-element--secondary {
background: linear-gradient(45deg, #00c3ff, #ffff1c) !important;
}
/* For tertiary buttons */
.sqs-block-button-element--tertiary {
background: linear-gradient(90deg, #f2709c, #ff9472) !important;
}
Want a Button That Changes on Hover?
You can even make the gradient animate slightly when someone hovers over it. This adds an interactive touch to your site and makes it feel more polished — without any extra plugins or code dependencies.
.sqs-block-button-element--primary:hover {
background: linear-gradient(135deg, #f857a6, #ff5858) !important;
}
Common Troubleshooting Tips
If your button gradient isn’t showing up, here’s what to check:
1. Are You Using the Right Selector?
Make sure you’re applying the code to .sqs-block-button-element--primary or whichever button type you’re using.
2. Did You Include !important?
Squarespace’s built-in styles are strong. Without !important, your new styles might not apply.
3. Are Your Colors and Syntax Correct?
Always double-check your hex codes and make sure your CSS has matching brackets {}.
How to Apply Gradient Effects to Text in Squarespace
Now that your buttons are glowing with fresh gradient style, let’s move to another eye-catching design technique: gradient text. Gradients on text aren’t just about beauty — they subtly direct attention and elevate your brand look. Whether it’s a headline, a callout, or a testimonial highlight, gradient text helps your message pop.
Unfortunately, Squarespace doesn’t include a native option to apply this. But again, with a few lines of CSS, you can transform your typography into an elegant color blend. Let’s get started.
Step-by-Step: Adding Gradient to H1 Headings
Let’s walk through how to apply a gradient to an H1 heading (your main page title). This same method works for H2, H3, and H4 with a simple tweak.
Step 1 – Target the H1 Element
Open your Custom CSS panel and paste the following:
h1 {
background: linear-gradient(90deg, #ff7e5f, #feb47b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
Step 2 – Add the !important Rule If Needed
Sometimes, Squarespace’s theme CSS overrides your styles. If the text stays black or disappears, try this adjusted version:
h1 {
background: linear-gradient(90deg, #ff7e5f, #feb47b) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
color: transparent !important;
}
How to Apply Gradient to H2, H3, H4 Text
This is where things get fun. You can target multiple heading levels by simply updating the CSS selectors:
h2, h3, h4 {
background: linear-gradient(135deg, #00c9ff, #92fe9d) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
color: transparent !important;
}
Don’t Want to Code? Use a Done-for-You Setup
If this all sounds great but you’d rather someone else handle it, I offer a Template Customization Service where I do all of this (and more) for you. You choose the template, I handle the setup — including custom styles like gradients — and you get a ready-to-launch site in a day.
Custom Gradient Backgrounds for Sections
You’ve now mastered adding gradients to buttons and text — but let’s take things one step further. In this final section, we’ll show you how to apply custom gradients to full sections on your Squarespace site. Whether you want a splashy homepage hero, a subtle background blend, or a bold banner for a call-to-action — this technique gives you full control.
Step 1 – Add a Section ID
Hover over the section you want to style and click Edit Section.
Click the ⚙️ gear icon.
In the “Section ID” field, add a unique name — like
gradient-banner.Click Apply and Save.
This allows you to target that exact section with CSS.
Step 2 – Add CSS for the Background
Now go to Design > Custom CSS and paste this code.
#gradient-banner {
background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
}
Gradient Tools and Resources
To help you create beautiful gradients faster, here are some helpful tools:
CSS Gradient Generator – Live preview + code copy
UI Gradient – Browse pre-made color combos
Coolors – Build palettes and gradients from your brand colors
Once you’ve picked your perfect blend, just copy the code into your Squarespace CSS panel.
Launch Faster with a Customizable Squarespace Template
👉 Browse the full Squarespace Template collection here and launch your dream website in days, not months.
Each Squarespace Template is:
Fully customizable — add your own colors, gradients, fonts, and images
Built with layout strategy, SEO, and mobile responsiveness baked in
Perfect for coaches, consultants, designers, photographers, wellness pros & more
Easy to set up — just plug in your content and launch confidently
Backed by tutorial videos and friendly support
✨ Whether you're building your first site or replacing a DIY design, these templates give you the polished look you want — without the overwhelm.
