About this snippet

Create an amazing login screen with floating background shapes. We built this layout using pure CSS animations, so you get a modern interface without JavaScript.

Size
2.8 KB
Uses
HTML, CSS
Loads
Nothing external
Views
251

Collections

Related snippets

<div class="login-page">
  <div class="shape shape-1"></div>
  <div class="shape shape-2"></div>
  <div class="shape shape-3"></div>
  
  <div class="login-card">
    <h2>Welcome Back</h2>
    <p>Please enter your details to sign in.</p>
    
    <div class="input-group">
      <label>Email Address</label>
      <input type="email" placeholder="hello@example.com">
    </div>
    
    <div class="input-group">
      <label>Password</label>
      <input type="password" placeholder="••••••••">
    </div>
    
    <button class="login-btn">Sign In</button>
  </div>
</div>
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background: #0f172a;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.login-page {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: float 10s infinite ease-in-out alternate;
  z-index: 1;
}

.shape-1 {
  width: 300px;
  height: 300px;
  background: #3b82f6;
  top: 10%;
  left: 15%;
  animation-delay: 0s;
}

.shape-2 {
  width: 400px;
  height: 400px;
  background: #ec4899;
  bottom: 10%;
  right: 15%;
  animation-delay: -5s;
}

.shape-3 {
  width: 250px;
  height: 250px;
  background: #8b5cf6;
  bottom: 20%;
  left: 30%;
  animation-delay: -2s;
}

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

.login-card {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 50px 40px;
  border-radius: 24px;
  width: 100%;
  max-width: 420px;
  color: #ffffff;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.login-card h2 {
  margin: 0 0 10px 0;
  font-size: 2rem;
}

.login-card p {
  color: #cbd5e1;
  margin-bottom: 30px;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.875rem;
  color: #e2e8f0;
}

.input-group input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #ffffff;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
}

.input-group input:focus {
  border-color: #3b82f6;
}

.login-btn {
  width: 100%;
  padding: 14px;
  background: #3b82f6;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.2s;
}

.login-btn:hover {
  background: #2563eb;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save