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
How To Screenshot On All 3 Desktop OS’s
Knowing how to screenshot is one of the corner stones to receiving or providing technical…
Scripting Secrets with PowerShell and OneTimeSecret.com
In my day job, I often have to send out links to customers. These links…
How to Add Telephone Links to Your Website
So you’ve gone through all the trouble of creating a stunning website for your business,…
Who Owns Microsoft?
Microsoft is one of the largest and most recognisable companies on the planet, operating in…
7 New Website Inspiration Tools
Over the last couple of months, I’ve found and kept 7 new website inspiration tools…
Microsoft Clarity – The Definitive Guide
I know I’m late to discovering this tool, but for anyone else out that that…
Let me know if you have any questions! Enjoy! 🎉