Create a Glassmorphism Login Form with Floating Blobs

A boring, boxy sign-in screen can ruin the first impression of an otherwise polished site or web app. In this tutorial you’ll learn how to create a modern Glassmorphism Login Form with floating color blobs using only HTML and CSS—no JavaScript, no frameworks, no images.

The Glassmorphism Login Form is a modern UI trend that blends transparency, blur effects and soft colors to create a sleek and futuristic design. By using pure HTML and CSS, you can build a visually appealing login experience that feels both lightweight and interactive. The design features:

• Frosted-glass panel (achieved with backdrop-filter: blur())
• Animated floating blobs that glow and grow subtly thanks to keyframes
• Floating labels that rise when inputs gain focus or become valid
• Remember-me checkbox, “Forgot password?” link and sign-up callout
• Fully responsive layout that stays centered on any screen

By the end you’ll understand every line of code and be able to adapt the pattern to registration screens, modal logins or profile edit forms.

HTML Structure

To start building our Glassmorphism Login Form, we’ll first create a clean and structured HTML layout. This includes a centered container, a form element and input fields for email and password.

The markup is concise: a flexbox wrapper for centering, a form-container that hosts the blobs (via its pseudo-elements) and a content div that holds the actual form.

<div class="main-container">
    <div class="form-container">
        <div class="content">
            <span class="title-text">Login</span>
            <form class="login-form">
                <div class="field">
                    <input required="" type="text">
                    <label>Email</label>
                </div>
                <div class="field">
                    <input required="" type="password">
                    <label>Password</label>
                </div>
                <div class="action">
                    <label><input type="checkbox">Remember me</label>
                    <a class="forget" href="">Forget password ?</a>
                </div>
                <button class="login">Login</button>
                <div class="signup">Don't have an Account ? <a href="">Sign up</a></div>
            </form>
        </div>
    </div>
</div>

Keeping the HTML organized and accessible (labels tied to inputs, button type defaulting to “submit”, clear headings) helps SEO, screen readers and future maintainers.

The HTML structure for this Glassmorphism Login Form is intentionally simple and semantic, ensuring accessibility and easy maintenance. With clearly defined input fields, labels and container elements, the foundation is clean and ready for styling.

Styling the Glassmorphism Login Form

In this section, we’ll dive into the styling techniques used to bring the Glassmorphism Login Form to life. From translucent backgrounds to subtle shadows and animations, each CSS property contributes to the elegant frosted-glass effect.

body {
    background: #212121;
}

.main-container {
    display: flex;
    min-height: 100vh;
    min-width: 450px;
    align-items: center;
    justify-content: center;
}

.form-container {
    width: 350px;
    display: flex;
    position: relative;
}

.form-container::before,.form-container::after{
    content: '';
    border-radius: 50%;
    height: 30px;
    width: 30px;
    position: absolute;
    animation: floating 3s ease-in-out infinite alternate;
}

.form-container::before {
    top: 18px;
    background: #f3e125;
    box-shadow: 20px 0px 50px 40px #f3e125;
}

.form-container::after {
    right: 0;
    z-index: -1;
    bottom: 18px;
    background: #29b4ff;
    box-shadow: -20px 0px 50px 40px #29b4ff;
}

input:focus {
    outline: none;
}

.content {
    width: 100%;
    font-size: 2rem;
    padding: 1.5rem;
    border-radius: 15px;
    font-family: 'calibri';
    background: #62626212;
    backdrop-filter: blur(30px);
    border: 1px solid #626262c2;
}

.title-text {
    color: white;
    display: block;
    text-align: center;
}

.field {
    position: relative;
}

.field label {
    bottom: 0;
    z-index: -1;
    transition: .4s;
    position: absolute;
    margin-bottom: 5px;
}

.field input {
    width: 100%;
    border: none;
    padding: 5px 0;
    color: white;
    margin-top: 32px;
    background: none;
    border-bottom: 1px solid #3f3f3f;
}

.field input:focus+label,
.field input:valid+label {
    bottom: 25px;
    font-size: 13px;
}

.action {
    display: flex;
    margin: 10px 0 30px;
    justify-content: space-between;

}

label {
    display: flex;
    cursor: pointer;
    font-size: 14px;
    color: #d0d0d0;
}

label input {
    margin-right: 3px;
    cursor: pointer;
}

.forget,
.signup a {
    color: white;
    font-size: 14px;
    text-decoration: none;
}

.forget:hover,
.signup a:hover {
    color: rgb(186, 186, 186)
}

.login {
    width: 100%;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    transition: .3s;
    font-weight: bold;
    padding: 6px 18px;
    border-radius: 30px;
    background: #ffffff;
}

.login:hover {
    transform: scale(0.95);
}

.signup {
    color: #bcbcbc;
    font-size: 14px;
    text-align: center;
    margin-top: 25px;
}

@keyframes floating {
    from {
        transform: scale(0.7);
    }

    to {
        transform: scale(1);
    }
}

• A dark body background lets the translucent panel pop.
• The .form-container is the blob host. Pseudo-elements ::before and ::after draw blurred circles that expand and contract gently.
• The blobs live outside the .content panel (and one sits behind it via z-index:-1), they blur nicely through the glassmorphic panel without interfering with clicks.
• backdrop-filter applies only to whatever lies behind .content, creating a tasty “frosted” effect. The semi-transparent background tint (#62626212) ensures text remains legible.
• Each .field is position: relative;. The <label> starts under the input; CSS sibling selectors make it rise and shrink whenever the input gains focus or already contains text (:valid). That micro-interaction keeps the form clean—no cluttered placeholders or lost context.

With just a few lines of CSS, we’ve transformed a basic form into a visually compelling Glassmorphism Login Form. This styling approach not only enhances user experience but also makes your interface stand out with a clean, modern aesthetic.

Conclusion

You’ve just learned how to create a Glassmorphism Login Form with animated floating blobs using pure HTML and CSS. Along the way you practiced:

• Centering layouts with Flexbox
• Crafting glass effects with backdrop-filter
• Animating pseudo-elements via keyframes
• Building accessible floating-label inputs

This component proves you don’t need JavaScript or heavy libraries to produce eye-catching, modern UI. Adapt the technique to other forms—sign-up, newsletter, comment dialogs—or combine it with the loaders and hover cards you built earlier to form a cohesive design system.

Keep experimenting, push your CSS skills and happy coding! 🚀