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 ⬇️

Blurry Dotted Background in Elementor

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!

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 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.

Recent Posts

Who Owns Microsoft?

Microsoft is one of the largest and most recognisable companies on the planet, operating in…

Read More

Let me know if you have any questions! Enjoy! 🎉

email popup image
Mark Harwood
NEVER miss a blog post again! Subscribe for email notifications whenever a new post is live!
Subscribe
NEVER miss a blog post again! Subscribe for email notifications whenever a new post is live!
Fill Out This Form, And I Will Be In Touch Shortly
Contact form image
I'll Be In Touch Soon