Radial Gradient Image Accents

What You'll Create

Add soft, glowing gradient circles in Squarespace positioned around images to create depth and visual interest. These radial gradients fade from color to transparent, adding artistic atmosphere without obscuring content.

The Problem It Solves

Plain image blocks can feel flat and disconnected from the page design. Adding soft, glowing color accents around images creates depth and artistic flair, but Squarespace doesn't offer this natively. CSS pseudo-elements with radial gradients enable these decorative touches.

Perfect For

Creative portfolios, Artist websites, Beauty brands, Wellness sites, Hero sections with atmosphere.

What Makes This Different

Hidden elements create positioned radial gradients that fade from color to transparent. By placing multiple gradients at different positions with different colors, you achieve layered, artistic glow effects around images. The gradients use positioning transformations to place them precisely relative to the image.

Details

• Section Type: Fluid & Classic

• Code Type: CSS

• Prerequisites: Section with image block

• Toolkit Title: Radial gradients as pseudo-elements

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support