How to Create Gradient Backgrounds in Squarespace 7.1 (NO CODE needed!)
About this Squarespace video tutorial
Gradient backgrounds are one of the biggest trends in modern website design. They add a polished, dynamic look to your site and can be customized to perfectly match your brand colors. In this tutorial, I’ll walk you through how to create stunning gradient backgrounds in Squarespace 7.1 without using any code.
Plus, I’ll share a bonus tip for replicating a design inspired by Jenna Kutcher’s homepage, where text overlays a gradient background for a professional and creative touch.
What You’ll Need Before Getting Started
Your brand colors added to your Squarespace site (via Site Styles).
Optional: An image with a transparent background (easily created in Canva using the background remover tool).
Timestamps
How to create gradient backgrounds in Squarespace 7.1.
Customizing gradients with your brand colors for a cohesive look.
Bonus: Jenna Kutcher-inspired text and gradient design effect.
How to remove the pause button on art backgrounds with a simple CSS snippet.
Want 20% off your new Squarespace subscription?
Subscribe to the Designing the Row® email list and get the exclusive code sent straight to your inbox. You’ll get email updates when new Squarespace tutorials are published, but you can unsubscribe at any time.
Step-by-Step Guide: Adding Gradient Backgrounds
Prepare Your Brand Colors
If your brand colors aren’t already added, go to Site Styles (the paintbrush icon) and edit your palette to include them. This ensures all gradients pull directly from your brand colors for a cohesive look.Add a Gradient Background
Add a new blank section to your desired page.
Click Edit Section > Background > Art.
Choose a gradient option and adjust the settings (e.g., start/end colors, angle, and texture).
Experiment with settings like invert colors or position thresholds for the perfect look.
Bonus: Jenna Kutcher-Inspired Gradient + Text Design
Want to replicate the design on Jenna Kutcher’s homepage? Here’s how:
Add a Gradient Background (as outlined above).
Add Text:
Insert a text block, make it bold or uppercase, and center-align it.
Adjust the text size by clicking the “A” with brackets icon to stretch it across the section.
Add an Image:
Use an image with no background (transparent PNG).
Position the image so it overlays part of the text and gradient.
Quick Tip: Remove the Pause Button on Animated Gradients
If you’re using an animated gradient background, you may notice a pause button appears. To remove it:
Go to Website Tools > Custom CSS.
Copy and paste this simple CSS snippet: .background-pause-button { display:none !important; }
Why Use Gradient Backgrounds?
Gradient backgrounds can make your site look modern and creative while staying on-brand. They’re an easy way to elevate your Squarespace design and stand out visually.
Let’s See Your Work!
Have you tried adding gradient backgrounds to your site? Share your creations in the comments below or tag me on social media—I’d love to see how you’ve customized your Squarespace website!
The latest Designing the Row tutorials…
