Neumorphic Style Circles background with HTML and CSS

Rayen

Neumorphism, a design trend that combines skeuomorphism and flat design, adds a soft, realistic touch to user interfaces. In this tutorial, we'll explore how to create stylish neumorphic-style circles using HTML and CSS. Learn how to implement this modern design approach to enhance your website's aesthetics and provide a visually pleasing user experience.




Step 1: HTML Markup:

Start by setting up the HTML structure. Create a container for your neumorphic-style circle, keeping the code clean and efficient.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neumorphism Cercles Box Animation: CSS </title>


    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="cercle"></div>
    <div class="cercle delay"></div>
    <div class="cercle"></div>
    <div class="cercle delay"></div>
    <div class="cercle"></div>
    <div class="cercle delay"></div>
    <div class="cercle"></div>
    <div class="cercle delay"></div>
    <div class="cercle"></div>
    <div class="cercle delay"></div>
    <div class="cercle"></div>
    <div class="cercle delay"></div>
    <div class="cercle"></div>
    <div class="cercle delay"></div>
    <div class="cercle"></div>
    <div class="cercle delay"></div>
    <div class="cercle"></div>
    <div class="cercle delay"></div>
    <div class="cercle"></div>
    <div class="cercle delay"></div>
    <div class="cercle"></div>
    <div class="cercle delay"></div>
    <div class="cercle"></div>
    <div class="cercle delay"></div>
    <div class="cercle"></div>
    <div class="cercle delay"></div>
    <div class="cercle"></div>
    <div class="cercle delay"></div>
    <div class="cercle"></div>
    <div class="cercle delay"></div>
    <div class="cercle"></div>
    <div class="cercle delay"></div>
    <div class="cercle"></div>
    <div class="cercle delay"></div>
    <div class="cercle"></div>
</body>

</html>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) to define the neumorphic styling. Neumorphism often involves soft shadows, gradients, and subtle highlights to mimic the appearance of physical elements.
/*-------------------- CSS --------------------*/
body {
    margin: 0;
    background: #e0e0e0;
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: space-evenly;
}

.cercle {
    width: 200px;
    aspect-ratio: 1/1;
    background: #e0e0e0;

    border-radius: 50%;
    box-shadow:
        inset 20px 20px 60px #bbb,
        inset -20px -20px 60px #fff,
        0px 0px 0px #bbb,
        0px 0px 0px #fff;
    animation: anime 3s infinite ease-in-out alternate;
}

.delay{
    animation-delay: 1.5s;
}

@keyframes anime {
    0% {
        box-shadow:
            inset 20px 20px 60px #bbb,
            inset -20px -20px 60px #fff,
            0px 0px 0px #bbb,
            0px 0px 0px #fff;
    }
    50% {
        box-shadow:
            inset 0px 0px 0px #bbb,
            inset 0px 0px 0px #fff,
            0px 0px 0px #bbb,
            0px 0px 0px #fff;
    }
    100% {
        box-shadow:
            inset 0px 0px 0px #bbb,
            inset 0px 0px 0px #fff,
            20px 20px 60px #bbb,
            -20px -20px 60px #fff
    }

}

Tailor the circle's size, colors, and shadow properties to match your design preferences. Neumorphism often involves playing with light and shadow to create a tactile feel.

Neumorphic circles can be used in various ways. They make excellent buttons, icons, or decorative elements. Integrate them into your website's layout for a modern and visually appealing design.

0 Comments