Pretty circles background

tdrayson

A snippetclub.com member was looking for a way to create a multi layered circle background for their website.

screenshot 2023 03 05 at 00.50.25

Snippet

Add the css below to your website and then add the class pretty circles to the div that you want to have the nice background.

You can change the colours of the circle by changing lines 2, 3 and 4.

CSS

        .pretty-circles {
    --inner-circle-colour: #b3e1c1;
    --middle-circle-colour: #d3eddb;
    --outer-circle-colour: #eff9f2;
    
    background-image: radial-gradient(
        var(--inner-circle-colour) 0% 25%,
        var(--middle-circle-colour) 25% 45%,
        var(--outer-circle-colour) 46% 65%,
        transparent 65% 100%
    );

    aspect-ratio: 1;
}

      
Copy

👋🏻 Weekly Tutorial Digest

I send out a weekly newsletter with links to new tutorials written in the last week, you can subscribe below.

Newsletter

🔒I won't send you spam, I promise