12 CSS Ripple Effects 11 / 12

CSS Ripple Login Form UI

A split-screen login page: the left panel features multi-origin CSS ripple rings expanding from a glowing contact point over a teal-green gradient; the right panel is a polished dark-surface form with teal focus rings and a JS ink-ripple on the submit and social-login buttons.

CSS + JS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="rpl-11">
  <!-- Left panel with ripple background -->
  <div class="rpl-11__left">
    <div class="rpl-11__bg-ring"></div>
    <div class="rpl-11__bg-ring"></div>
    <div class="rpl-11__bg-ring"></div>
    <div class="rpl-11__bg-ring"></div>
    <div class="rpl-11__bg-ring"></div>
    <div class="rpl-11__bg-ring"></div>
    <div class="rpl-11__glow"></div>
    <div class="rpl-11__brand">
      <div class="rpl-11__brand-icon">◈</div>
      <h2>Welcome to<br>Ripple Studio</h2>
      <p>A login form where even the background is a CSS ripple animation.</p>
    </div>
  </div>

  <!-- Right panel: form -->
  <div class="rpl-11__right">
    <div class="rpl-11__form-wrap">
      <div class="rpl-11__form-header">
        <span class="tag">Sign in</span>
        <h1>Good to see<br>you again.</h1>
        <p>Enter your credentials to continue</p>
      </div>

      <div class="rpl-11__field">
        <label>Email address</label>
        <input type="email" placeholder="[email protected]">
      </div>
      <div class="rpl-11__field">
        <label>Password</label>
        <input type="password" placeholder="••••••••">
      </div>

      <button class="rpl-11__submit" id="rpl-11-btn">Sign in</button>

      <div class="rpl-11__divider">or continue with</div>

      <div class="rpl-11__socials">
        <button class="rpl-11__social rpl-11__social-btn">🔵 Google</button>
        <button class="rpl-11__social rpl-11__social-btn">⬛ GitHub</button>
      </div>

      <div class="rpl-11__footer">
        Don't have an account? <a href="#">Sign up free</a>
      </div>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

.rpl-11, .rpl-11 *, .rpl-11 *::before, .rpl-11 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rpl-11 ::selection { background: #14b8a6; color: #fff; }

.rpl-11 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background: #040f0e;
}
@media (max-width: 720px) {
  .rpl-11 { grid-template-columns: 1fr; }
  .rpl-11__left { display: none; }
}

/* ─── Left: animated ripple background ─── */
.rpl-11__left {
  position: relative;
  background: linear-gradient(135deg, #042f2e 0%, #065f46 50%, #0d4a40 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Layered ripple rings from bottom-left */
.rpl-11__bg-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(20,184,166,0.3);
  animation: rpl-11-expand ease-out infinite;
}
.rpl-11__bg-ring:nth-child(1) { left: 10%; bottom: 15%; width: 0; height: 0; animation-duration: 5s; animation-delay: 0s; }
.rpl-11__bg-ring:nth-child(2) { left: 10%; bottom: 15%; width: 0; height: 0; animation-duration: 5s; animation-delay: 1.0s; border-color: rgba(20,184,166,0.2); }
.rpl-11__bg-ring:nth-child(3) { left: 10%; bottom: 15%; width: 0; height: 0; animation-duration: 5s; animation-delay: 2.0s; border-color: rgba(20,184,166,0.12); }
.rpl-11__bg-ring:nth-child(4) { left: 10%; bottom: 15%; width: 0; height: 0; animation-duration: 5s; animation-delay: 3.0s; border-color: rgba(20,184,166,0.06); }
.rpl-11__bg-ring:nth-child(5) { left: 75%; top: 20%; width: 0; height: 0; animation-duration: 7s; animation-delay: 1.5s; border-color: rgba(52,211,153,0.25); }
.rpl-11__bg-ring:nth-child(6) { left: 75%; top: 20%; width: 0; height: 0; animation-duration: 7s; animation-delay: 3.0s; border-color: rgba(52,211,153,0.12); }
@keyframes rpl-11-expand {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 0;
         width: 700px; height: 700px; }
}

/* Branded content */
.rpl-11__brand {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 40px;
  color: #e8fffe;
}
.rpl-11__brand-icon {
  font-size: 3.5rem;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 20px rgba(20,184,166,0.6));
}
.rpl-11__brand h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.rpl-11__brand p {
  font-size: 0.92rem;
  color: rgba(232,255,254,0.55);
  line-height: 1.6;
  font-weight: 300;
  max-width: 280px;
}

/* Glow dot */
.rpl-11__glow {
  position: absolute;
  left: 10%; bottom: 15%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #14b8a6;
  box-shadow: 0 0 20px #14b8a6, 0 0 40px rgba(20,184,166,0.5);
  transform: translate(-50%, 50%);
}

/* ─── Right: Login form ─── */
.rpl-11__right {
  background: #0a1412;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
}

.rpl-11__form-wrap {
  width: 100%;
  max-width: 380px;
}

.rpl-11__form-header {
  margin-bottom: 36px;
}
.rpl-11__form-header .tag {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #14b8a6;
  margin-bottom: 10px;
  display: block;
}
.rpl-11__form-header h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #e8fffe;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.rpl-11__form-header p {
  margin-top: 8px;
  font-size: 0.88rem;
  color: rgba(232,255,254,0.4);
  font-weight: 300;
}

/* Form fields */
.rpl-11__field {
  margin-bottom: 20px;
}
.rpl-11__field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(232,255,254,0.5);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.rpl-11__field input {
  width: 100%;
  background: rgba(20,184,166,0.05);
  border: 1.5px solid rgba(20,184,166,0.15);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: 'Plus Jakarta Sans';
  font-size: 0.95rem;
  color: #e8fffe;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.rpl-11__field input::placeholder { color: rgba(232,255,254,0.2); }
.rpl-11__field input:focus {
  border-color: #14b8a6;
  background: rgba(20,184,166,0.08);
  box-shadow: 0 0 0 3px rgba(20,184,166,0.15);
}

/* Submit button with ripple */
.rpl-11__submit {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #0d9488, #14b8a6);
  color: #fff;
  font-family: 'Plus Jakarta Sans';
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(20,184,166,0.35);
  transition: transform 0.15s, box-shadow 0.15s;
  margin-top: 8px;
}
.rpl-11__submit:hover { transform: translateY(-1px); box-shadow: 0 8px 32px rgba(20,184,166,0.5); }
.rpl-11__submit:active { transform: translateY(1px); }
.rpl-11__submit .ink {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  pointer-events: none;
  animation: rpl-11-ink 0.6s linear forwards;
}
@keyframes rpl-11-ink { to { transform: scale(4); opacity: 0; } }

/* Social logins */
.rpl-11__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: rgba(232,255,254,0.2);
  font-size: 0.78rem;
}
.rpl-11__divider::before, .rpl-11__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(232,255,254,0.1);
}

.rpl-11__socials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rpl-11__social {
  position: relative;
  overflow: hidden;
  padding: 12px;
  border: 1.5px solid rgba(232,255,254,0.1);
  border-radius: 10px;
  background: transparent;
  color: rgba(232,255,254,0.65);
  font-family: 'Plus Jakarta Sans';
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: border-color 0.2s, background 0.2s;
}
.rpl-11__social:hover { border-color: rgba(20,184,166,0.4); background: rgba(20,184,166,0.05); }
.rpl-11__social .ink {
  position: absolute;
  border-radius: 50%;
  background: rgba(20,184,166,0.25);
  transform: scale(0);
  pointer-events: none;
  animation: rpl-11-ink 0.5s linear forwards;
}

.rpl-11__footer {
  text-align: center;
  margin-top: 24px;
  font-size: 0.82rem;
  color: rgba(232,255,254,0.3);
}
.rpl-11__footer a {
  color: #14b8a6;
  text-decoration: none;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .rpl-11__bg-ring { animation: none !important; opacity: 0.1; }
  .rpl-11__submit, .rpl-11__social, .rpl-11__field input { transition: none; }
  .ink { animation: none !important; }
}
document.querySelectorAll('.rpl-11__submit, .rpl-11__social-btn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    const rect = this.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const size = Math.max(rect.width, rect.height);
    const ink = document.createElement('span');
    ink.className = 'ink';
    ink.style.cssText = `left:${x-size/2}px;top:${y-size/2}px;width:${size}px;height:${size}px;`;
    this.appendChild(ink);
    ink.addEventListener('animationend', () => ink.remove(), { once: true });
  });
});

More from 12 CSS Ripple Effects

CSS Aurora Borealis Ripple BackgroundCSS Neon Glow Ripple EffectCSS Ripple Loading SpinnerCSS Sonar Ping Ripple AnimationCSS Ripple Card Hover EffectCSS Sound Wave Ripple VisualizerCSS Liquid Drop Ripple AnimationCSS Water Ripple Click EffectCSS Ripple Button Click AnimationCSS Pond Ripple Background AnimationCSS Heartbeat Pulse Ripple Effect
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →