•

December 12, 2024

3 min read

Login Form with Stylish UI and Animated Background

In today's digital world, a modern login form is a crucial component of any web application. A well-designed login form enhances user experience, security, and aesthetics. In this tutorial, we will guide you on how to create a modern, stylish, and animated login form using HTML and CSS. check out other login form.

Why a Modern Login Form Matters

A responsive and user-friendly login form improves user retention and engagement. Here are some key benefits:

Enhanced User Experience: Smooth animations and modern UI elements create an intuitive experience.
Improved Security: Encourages better password management and authentication methods.
Professional Design: A well-crafted login page sets the tone for the entire website.

Features of This Modern Login Form

This modern login form includes:

Glassmorphism UI: A frosted glass effect for a sleek design.
Animated Background: Floating color gradients for a futuristic look.
Responsive Design: Fully adaptable for all screen sizes.
Social Login Buttons: Sign in with Google or Apple.

By following this guide, you can create a modern login form that is visually appealing, user-friendly. Whether you're building a personal project or working on a professional web application, this responsive login form will enhance the user experience. Try implementing these techniques and watch your login page design stand out!

Step-by-Step Guide to Building the Modern Login Form

Structure the HTML

First, create the basic HTML structure for the login form:

Style the Login Form with CSS

Now, let's apply CSS to create a glassmorphism effect and animated background.

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Modern Login Form</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="login-container">
      <div class="login-header">
        <h1>Welcome Back</h1>
        <p>Enter your credentials to access your account</p>
      </div>
      <form>
        <div class="form-group">
          <label for="email">Email Address</label>
          <input
            type="email"
            id="email"
            placeholder="name@company.com"
            required
          />
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input
            type="password"
            id="password"
            placeholder="••••••••"
            required
          />
        </div>
        <div class="remember-forgot">
          <div class="remember-me">
            <input type="checkbox" id="remember" />
            <label for="remember">Remember me</label>
          </div>
          <a href="#" class="forgot-password">Forgot Password?</a>
        </div>
        <button type="submit" class="login-button">
          Sign in to your account
        </button>
        <div class="social-login">
          <button type="button" class="social-button">
            Continue with Google
          </button>
          <button type="button" class="social-button">
            Continue with Apple
          </button>
        </div>
        <div class="signup-link">
          Don't have an account? <a href="#">Create account</a>
        </div>
      </form>
    </div>
  </body>
</html>

css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0f172a;
  position: relative;
  overflow: hidden;
}

/* Animated background */
body::before,
body::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
  animation: float 10s infinite ease-in-out alternate;
}

body::before {
  background: #4f46e5;
  top: -100px;
  left: -100px;
}

body::after {
  background: #7c3aed;
  bottom: -100px;
  right: -100px;
  animation-delay: -5s;
}

@keyframes float {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(50px, 50px) scale(1.2);
  }
}

.login-container {
  background: rgba(255, 255, 255, 0.05);
  padding: 3rem;
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 500px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
}

.login-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.login-header h1 {
  color: #fff;
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-header p {
  color: #94a3b8;
  font-size: 1rem;
}

.form-group {
  margin-bottom: 2rem;
  position: relative;
}

.form-group label {
  display: block;
  color: #e2e8f0;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.025em;
}

.form-group input {
  width: 100%;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  font-size: 1rem;
  color: #fff;
  transition: all 0.3s ease;
}

.form-group input::placeholder {
  color: #64748b;
}

.form-group input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
  background: rgba(255, 255, 255, 0.08);
}

.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.remember-me label {
  color: #94a3b8;
  font-size: 0.95rem;
}

.remember-me input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #4f46e5;
  border-radius: 4px;
}

.forgot-password {
  color: #4f46e5;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.forgot-password:hover {
  color: #7c3aed;
  text-shadow: 0 0 20px rgba(124, 58, 237, 0.5);
}

.login-button {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.login-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: 0.5s;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -15px rgba(79, 70, 229, 0.5);
}

.login-button:hover::before {
  left: 100%;
}

.signup-link {
  text-align: center;
  margin-top: 2rem;
  color: #94a3b8;
  font-size: 0.95rem;
}

.signup-link a {
  color: #4f46e5;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.signup-link a:hover {
  color: #7c3aed;
  text-shadow: 0 0 20px rgba(124, 58, 237, 0.5);
}

/* Social login buttons */
.social-login {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.social-button {
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.social-button:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

@media (max-width: 480px) {
  .login-container {
    padding: 2rem;
  }

  .login-header h1 {
    font-size: 2rem;
  }

  .social-login {
    grid-template-columns: 1fr;
  }
}

CodingVox

Developer

Get More Tutorials Like This

Join 1,000+ developers getting weekly web development tips and code snippets

modern login formstylish login UIlogin form HTML CSSanimated login formresponsive login form

Share this article

Found this helpful? Share it with others!

Cartoon-Themed Login Form with Interactive Animations

Make a Crypto Dashboard with HTML and CSS

•