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.
clip-path: polygon() and
filter: blur() on a container you can create some pretty cool and performant glowing, animating background effects:
I think the code is pretty straightforward, so I won’t go line-by-line, but here are the things to note:
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
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:
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.