How to Add a Gradient Background to Your Squarespace Website
Looking for a simple way to elevate your Squarespace website design?
Adding a gradient background is one of the easiest ways to bring depth, texture, and personality to your site (and there’s no coding required!)
Instead of a flat block of color, gradients create a smooth flow between two shades. They’re one of those easy but impactful design tweaks that can shift your website from 🙂 to 🤩🤩🤩
In this quick tutorial, I’ll walk you step-by-step through how to create a custom gradient background in Squarespace, share my favorite design settings, and give you pro tips to make it look seamless.
Wondering what a gradient background looks like on a website?
Below is an example of what we’ll be creating. This is the gradient I used in my video tutorial, so check that out if you want to see how I did it!
Tips Before You Start
Gradients work best for one long section, or split across 2–3 stacked sections
To make your gradient look seamless, choose colors that are fairly close on the color wheel (think deep blue into teal, or peach into soft pink)
If you want to use colors that are in different color families, you’ll need multiple sections to span the gradient across. (See my video tutorial for more on this!)
Use Coolors.co to experiment with gradient color combos before applying them to your site
Use the Eyedropper Chrome extension to sample colors from a webpage
Step-by-Step: Adding a Gradient Background in Squarespace
01. Edit the section background
Hover over the section you’d like to edit and click Edit Section > Background > Art
02. Select the Gradient option
In the right-hand column, choose Gradient (it’s the fourth option down)
03. Open Gradient Settings
Click the Settings icon to customize your gradient
04. Choose your Start color
Select from your brand palette, or enter a custom hex code. (Hex codes are 6-digit color codes that start with #. Ex. #FFFFFF for white.)
05. Choose your End color
Pick a complementary shade. If the transition looks too harsh, try a color closer to your Start shade.
06. Adjust Shape and Size settings
Here’s what I use to create a simple top-down gradient:
Start position: -100
End position: 100
Angle: 90
07. Smooth out the Texture settings
Set all Texture sliders to 0 for a clean, smooth look. (Feel free to play around here to find what you like best!)
Now It’s Your Turn
See how easy that was? Adding a gradient background in Squarespace is just one of many ways to make your site feel more alive and stand out.
If you’re craving more Squarespace design tips, or you’d love support creating a website that fully embodies your work as a coach or healer—I’d love to help. Reach out anytime, or check out my other tutorials for more Squarespace customization ideas.
