How to create a blob gradient in Squarespace without code
My first blob gradient background in Squarespace
A few years ago I created a website for poet Yvonne Higgins Leach. She wanted a very unique and original look to distinguish her website. It ended up that I created an abstract gradients that were interspersed in her website. I did this on Squarespace 7.0, and it involved gradient images and a lot of custom CSS code to position them just right! Not too much later, Squarespace started version 7.1 with Fluid Engine, and I saw an example of a Squarespace gradient background being used with shapes. I immediately thought, if only . . .
Full circle with the blob gradient
Supposedly, 2017 was the year of the blob gradient. But it’s 2025 now! Are blob gradients still relevant? Yes, yes they are. It seems that gradients in general have been a continuing trend, and blob or abstract gradients are experiencing a revival of sorts—just look at Canva and Adobe Express websites for starters and coming full circle.
I too have come full circle with the blob gradient when mocking up a template, but this time it is so much easier to create custom abstract gradients without code in Squarespace,
Here’s how you do it:
-
Hi, this is Denise from Pacific Room Web Design.
This tutorial is about creating gradients with the shape block. First of all, add a block, go down and find the shape. There it is. We want round.
So we go into editing, and there you'll find a bunch of shapes that you can choose. Just choose the round one and you notice that you can move the different sides and points so that you can configure it how you want.
Now we're gonna duplicate this three times. Just go up to the, yeah, right there where you duplicate the shape.
So now we have three and like I said, you can make them different sizes and make them kind of off-centered or whatever you want.
Next let's, uh, look at the colors and how we blur them. If you go into the color, you can lower the opacity so that it's more transparent.
Then we're gonna put it into a blend and there's all sorts of different blend modes that you can do. But what we're gonna use is normal. And then we're going to use blur.
And down below the blur, you see, you'll have a, a place where you can, um, make it larger, the blur, larger or smaller.
Uh, let's go into the center one and we'll make that a different color. Um, as you can see, you can use whatever's on the palette of your website, or you can go up to the custom color and make, uh, use whatever you want.
Again, I'm going to lower the opacity on that so it'll see through. And I think maybe I'll bring up the opacity on this one. It looks just a little bit too not there.
Next, on this one I will be using normal blend mode. Then I'll turn on the blur and we'll go down and bring out the blur.
Kind of you can arrange these any way you want. Next, let's try another color that we'll use. And it's this light, very light greenish color. And I'm going to make it in, use a custom color because that green is kind of light and go down, normal blend, blur. And we'll bring that up a little bit and bring it over. And now I want to, you know, you move it around a little bit, however you want.
I wanna click on this one and make it, use the toggle there to make it go in front. It's just kind of, you're gonna have to just kind of arrange it how you want and kind of mess around with the blur.
That makes it really hard, I think. Don't know about that. Lighten it up a little bit and turn back on the blur.
Okay. I think what I wanna do is kind of extend these colors out, make it a little bit larger.
So I think I'm almost done. So if you see, you can just, um, mess around with all these really fun things and make yourself, you know, some gradient blobs.
You can create these blob gradients in Squarespace 7.1 using Fluid Engine. Pages that use the Classic Editor, like Blog pages do not support the shape block and cannot be used to create these gradients.
Please share on Pinterest
