How to Create Brilliant “Blob” Gradients in Squarespace.
My first blob gradient
A few years ago I created a website for a poet Yvonne Higgins Leach. She wanted a very unique and original look to distinguish her website. It ended up that I created abstract “blob” 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 gradients being used with shapes. I immediately thought, if only . . .
Full circle with the “blob.”
Supposedly, 2017 was the year of the blob gradient. But it’s 2025 now! Are blobs 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 creating our new Color Pop Nail Salon template (launching soon) but this time it is so much easier to create custom abstract gradients without code in Squarespace. Here’s a preview of the template:
Here’s how you do it:
You can create these “blob gradients” on 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.