How to create a cool radial background on Squarespace

Radial backgrounds can look great on Squarespace websites. They help to add more depth to a website compared with flat colours and can be used not just as a section background, but also on everything from buttons to blocks.

In this latest Squarespace guide I’ll talk you through how to create a cool radial background on Squarespace.

To add a radial background to a specific section, add your new section to your Squarespace website via the edit dashboard.

Watch the video

Check out the YouTube video below 👇

You then need to head to the custom CSS section of the design panel and create some new lines.

Like with any piece of targeted code, you’ll need to add the block ID of the section you want to target.

Onto the end of this ID you’ll need to add:

.section-background

The code you then need to add in to create the radial effect is:

#SECTION-ID-HERE .section-background {
background: radial-gradient(69.44% 72.66% at 0 100%,#307779 0,rgba(48,119,121,0) 100%),#204243 !important;
}

The radial background in action…

Adding radial backgrounds to a Squarespace website gives you the chance to get really creative and you can play around with the percentages and colours within the line of code to find the effect you want.

The lower the percentage you use, the lower the gradient goes. I always recommend trying a few different options to discover what provides you with the best results.

You can also mix colours, e.g. adding white and green together, which creates a more drastic radial gradient.

If you want, you could change where the background is applied to. You could apply it to a text block, an image style or even a button. In order to add a radial background to a button for instance, head to Google Chrome Developer Tools and find the specific target you want to edit.

You’re then going to want to replace the .section-background added above with the code for the button instead.

---

📩 Join the inner circle to get exclusive code updates

---

Creating radial backgrounds just requires a little bit of code and playing around but the results can be super effective. You can add a radial background to pretty much anything on Squarespace, as long as it has a target ID.

Have a go yourself and see what you think of the results!

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?