DocsAllOver Responsive CSS-Only Glassmorphism Login Form with background image Snippets

Responsive CSS-Only Glassmorphism Login Form with background image

Aug. 24, 2025

CSS, Responsive, Card, Login Page, Clean UI, Form, Login Form

Full Screen

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.css" crossorigin="">

  <title>Responsive CSS Only Glassmorphism Login Form With Background Image</title>
</head>

<body>
  <div class="login">
    <img src="https://docsallover.com/docsallover/media/snippet/internal_images/responsive-css-only-glassmorphism-login-form-background-image.jpg" alt="image" class="login__bg">

    <form action="" class="login__form">
      <h1 class="login__title">Login</h1>

      <div class="login__inputs">
        <div class="login__box">
          <input type="email" placeholder="Email ID" required class="login__input">
          <i class="ri-mail-fill"></i>
        </div>

        <div class="login__box">
          <input type="password" placeholder="Password" required class="login__input">
          <i class="ri-lock-2-fill"></i>
        </div>
      </div>

      <div class="login__check">
        <div class="login__check-box">
          <input type="checkbox" class="login__check-input" id="user-check">
          <label for="user-check" class="login__check-label">Remember me</label>
        </div>

        <a href="#" class="login__forgot">Forgot Password?</a>
      </div>

      <button type="submit" class="login__button">Login</button>

      <div class="login__register">
        Don't have an account? <a href="#">Register</a>
      </div>
    </form>
  </div>
</body>

</html>

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");


* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body,
input,
button {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
}

a {
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.login {
    position: relative;
    height: 100vh;
    display: grid;
    align-items: center;
}

.login__bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.login__form {
    position: relative;
    margin-inline: 1.5rem;
    background-color: hsla(0, 0%, 100%, .01);
    border: 2px solid hsla(0, 0%, 100%, .7);
    padding: 2.5rem 1rem;
    color: hsl(0, 0%, 100%);
    border-radius: 1rem;
    backdrop-filter: blur(16px);
}

.login__title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 1.25rem;
}

.login__inputs,
.login__box {
    display: grid;
}

.login__inputs {
    row-gap: 1.25rem;
    margin-bottom: 1rem;
}

.login__box {
    grid-template-columns: 1fr max-content;
    column-gap: .75rem;
    align-items: center;
    border: 2px solid hsla(0, 0%, 100%, .7);
    padding-inline: 1.25rem;
    border-radius: 4rem;
}

.login__input,
.login__button {
    border: none;
    outline: none;
}

.login__input {
    width: 100%;
    background: none;
    color: hsl(0, 0%, 100%);
    padding-block: 1rem;
}

.login__input::placeholder {
    color: hsl(0, 0%, 100%);
}

.login__box i {
    font-size: 1.25rem;
}

.login__check,
.login__check-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login__check {
    margin-bottom: 1rem;
    font-size: .813rem;
}

.login__check-box {
    column-gap: .5rem;
}

.login__check-input {
    width: 1rem;
    height: 1rem;
    accent-color: hsl(0, 0%, 100%);
}

.login__forgot {
    color: hsl(0, 0%, 100%);
}

.login__forgot:hover {
    text-decoration: underline;
}

.login__button {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: hsl(0, 0%, 100%);
    border-radius: 4rem;
    color: hsl(0, 0%, 0%);
    font-weight: 500;
    cursor: pointer;
}

.login__register {
    font-size: .813rem;
    text-align: center;
}

.login__register a {
    color: hsl(0, 0%, 100%);
    font-weight: 500;
}

.login__register a:hover {
    text-decoration: underline;
}

/*=============== BREAKPOINTS ===============*/
/* For medium devices */
@media screen and (min-width: 576px) {
    .login {
        justify-content: center;
    }

    .login__form {
        width: 420px;
        padding-inline: 2.5rem;
    }

    .login__title {
        margin-bottom: 2rem;
    }
}

//Doesn't require any JS.

This snippet showcases a responsive and modern login form with a glassmorphism effect. It offers a simple and intuitive user experience with a visually striking design achieved with pure CSS.

Key Features

Responsive Design: The login form adapts seamlessly to different screen sizes, ensuring a consistent user experience across devices.
Glassmorphism Effect: The form card features a translucent and blurred background, creating a frosted glass look that stands out against the image. This effect is achieved with CSS backdrop-filter property.
CSS-Only Implementation: The entire design, including the glassmorphism effect and responsiveness, is built using only CSS and HTML, making it lightweight and fast-loading.
Visual Appeal: The design is enhanced with a background image and clean typography, making for a modern and elegant user interface.

Implementation

Create the HTML Structure: Set up the basic HTML for the login page, including a main container for the card, a form, and input fields for username and password.
Apply CSS Styles: Use CSS to style the page elements. The body element is styled with the background image and a backdrop-filter. The form container is styled with a background with transparency and a backdrop-filter to create the glassmorphism effect.
Customize as Needed: The background image, fonts, colors, and layout can all be easily customized by changing the values in the CSS.

Latest Snippets

View All