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 Medium!

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 dedicated styles.css file.

If you’re using Elementor then the pro version allows you to add custom CSS, otherwise you can use Appearance -> Customise -> Additional CSS

Once you know how you’re implementing the CSS code, add this:

.new-home-dotted-background{
	background-clip: padding-box;
	border-radius: 200px;
	box-shadow: inset 0px 0px 20px 20px white;
	--dot-bg: white;
  --dot-color: hsl(226, 100%, 69%);
  --dot-size: 2px;
  --dot-space: 15px;
	background:
		linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
		linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
		var(--dot-color);
}

And there you go, that’s everything you need to create this effect. You can of course change any aspect of this setup.