Glowing Blurred Backgrounds with CSS

About a year ago I was asked to create a glowing ball of light animated background effect for a website. The end result was very cool looking for being so easy to pull off with just CSS. Here’s a quick look at how it’s done.

Using clip-path: polygon() and filter: blur() on a container you can create some pretty cool and performant glowing, animating background effects:

See the Pen Pretty Blurred Backgrounds with clip-path and filter:blur by Andrew (@walpolea) on CodePen.

I think the code is pretty straightforward, so I won’t go line-by-line, but here are the things to note:

Using clip-path:polygon() is a really great way to create interesting and scalable shapes since you can use percentage-based values. On top of that, they are pretty easy to create with online tools or vector graphics software.

I happen to prefer Adobe Illustrator, and while it’s paid, I’m well-versed with it and I love that I can copy a path out of it directly into vscode as an SVG. And pro-tip, your SVG export settings in Illustrator will match how that copy/pasted code looks, so you can fine-tune it to format exactly as you like. Illustrator does prefer to export SVGs with absolute pixel values, so the other trick there is to use a 100px x 100px artboard to draw your path, and then use some JavaScript like this to convert the path from pixel to percentage values! Works like a charm!

Now back to the CSS effect! Since we’re going to be blurring these paths, they don’t have to be perfect at all. In fact, I get away with turning three rough blob shapes into a single path by connecting them with a sliver of path that ends up disappearing in the blurring process.

Here it is without the blurring applied:

See the Pen Pretty Blurred Backgrounds with clip-path and filter:blur by Andrew (@walpolea) on CodePen.

The next tip is to animate the internal shapes, but apply the filter:blur() to the container. This will give you the performance you want on an effect like this. It also helps to blur with a vw unit since a fixed value might not be as blurred as you want on large screens or too blurred on small screens.

Lastly, you can use gradients and mix-blend-mode to get the exact effect you’re looking for. The little CSS framework I’ve provided in the above code also gives you all you need to layer multiple paths on top of each other and tweak values like colors, opacity, size, position, and speed.