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!
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
Microsoft Clarity – The Definitive Guide
I know I’m late to discovering this tool, but for anyone else out that that…
PowerShell Where-Object | Super Easy Object Filtering
Morning everyone! I wanted to revisit a root topic of mine: Windows PowerShell! If you…
Best Plugins For WordPress
If you’ve ever setup a WordPress website before, you’ll have probably seen the dizzying amount…
How To Turn Off iPhone 15
You might think you’re being dumb but trust me, I had to Google how to…
When Does The iPhone 16 Come Out?
Apple’s new iPhone, the iPhone 16, has just been released! Let’s go through everything you…
How To Setup Subscriptions On Fiverr In 2024
If you have any gigs active on Fiverr, you might want to start generating regular…
Let me know if you have any questions! Enjoy! 🎉