Blurry Dotted Background in Elementor

Been a while! Let’s kick things back into gear by showing you how I created this blurry dotted background effect entirely in HTML and CSS ⬇️

Well, technically, the client I built this for used Elementor so it’s not entirely HTML and CSS but this can be replicated simply by using the div element.

Before we begin, I have also written this post on my website!

Blurry Dotted Background in Elementor

This is actually super simple, once you know how to do it of course!

I very often struggle with CSS so it takes me a while to build custom visual elements. I’m certainly no designer either so there’s a lot of trial and error. Along with copious amounts of Googling…

First, you’ll need to add a new container inside Element. Once this is complete, give it a unique CSS class from inside the Advanced menu. In this example, I called the new class ‘new-home-dotted-background’:

Now you’ve done that, you can either add some content or set a min height since the container will automatically shrink down to nothing if it can.

Now, for the CSS!

If you are using plain old HTML and CSS then you can either add this into the style section of your HTML or better still, create a…