Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Neumorphism Loading Spinner in HTML & CSS

Web Development CSS HTML

In this article, we will create a Neumorphism Loading Spinner using HTML and CSS. The loading spinner is a common UI element used to indicate a process in progress, such as loading content or waiting for data from the server. We'll add a modern touch to it using the Neumorphism design technique.

Neumorphic designs give a 3D look by combining highlights and shadows around elements, making them appear to protrude or sink into the surface.

Syntax

.neumorphic-element {
    box-shadow: 
        positive-x positive-y blur-radius dark-color,
        negative-x negative-y blur-radius light-color;
    background-color: base-color;
}

Method 1: Basic HTML Structure

We'll start by writing a simple HTML structure. The spinner will consist of a div element, and we will style it to create the Neumorphic effect 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Neumorphism Loading Spinner</title>
</head>
<body>
    <h1><span>tutorials</span>point</h1>
    <div class="spinner-container">
        <div class="spinner"></div>
    </div>
</body>
</html>

Method 2: Adding CSS for Neumorphic Spinner

Next, we need to style our spinner using CSS. The key here is to add shadows in such a way that the element looks raised or pressed into the background. We'll make use of box-shadow properties to achieve this effect 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Neumorphism Loading Spinner</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #ecf0f3;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        h1 {
            position: absolute;
            top: 20px;
            font-size: 2rem;
        }

        span {
            color: green;
        }

        .spinner-container {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .spinner {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #ecf0f3;
            position: relative;
            box-shadow:
                8px 8px 15px #b8b9be,
                -8px -8px 15px #fff;
            animation: spin 1.5s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .spinner::before {
            content: '';
            position: absolute;
            top: 12px;
            left: 12px;
            width: 76px;
            height: 76px;
            border-radius: 50%;
            border: 4px solid transparent;
            border-top-color: #3498db;
            animation: spin 1s linear infinite;
        }
    </style>
</head>
<body>
    <h1><span>tutorials</span>point</h1>
    <div class="spinner-container">
        <div class="spinner"></div>
    </div>
</body>
</html>

A neumorphic loading spinner appears as a raised circular element with a rotating blue arc inside, creating a smooth loading animation against a soft gray background.

CSS Code Explanation

  • The body needs to be centered, horizontally and vertically using Flexbox. The background color is set to a soft light grey (#ecf0f3), which is the typical background color for Neumorphism designs.
  • The most important part of Neumorphism is the box-shadow property. The shadows are strategically placed with different intensities and directions. The dark shadow (#b8b9be) on the bottom-right and the light shadow (#fff) on the top-left create the illusion of a raised 3D element.
  • The animation property applies rotation using @keyframes. The spinner rotates indefinitely with the spin keyframes, which rotate it by 360 degrees in 1.5 seconds.
  • The .spinner::before creates an inner rotating element that simulates the actual loading spinner. It has a border with a colored top border (#3498db), creating a rotating arc effect.

Key Points

Property Purpose Value
box-shadow Creates neumorphic effect Light and dark shadows
border-radius Makes circular shape 50%
animation Rotates spinner spin 1.5s linear infinite
::before Creates loading arc Blue border-top

Conclusion

The Neumorphism loading spinner combines modern design with functional animation. The key is using dual box-shadows to create depth and a pseudo-element for the rotating indicator. This creates an elegant loading experience that appears to emerge from the surface.

Updated on: 2026-03-15T18:12:45+05:30

330 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements