Pretty circles background

tdrayson

March 5, 2023

A SnippetClub 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

Table of contents

Snippet

Tags

Related Posts

Populate list of users in Fluent Form dropdown

Fluent Forms conversational form pretty URL landing pages based on form title

Conditionally show a block based on the current author with a dynamic class

Highlight empty links

👋🏻 Weekly Tutorial Digest

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

🔒I won't send you spam, I promise