Why this works

Neumorphism blends background and component shadows to create a soft extruded effect. Floating labels enhance usability while maintaining a clean interface, and inset shadows mimic depth inside inputs.

Source Code

<form style="background:#e0e0e0;padding:2rem;border-radius:20px;box-shadow:8px 8px 16px #bebebe,-8px -8px 16px #ffffff;width:100%;max-width:400px">
  <div class="form-floating mb-4">
    <input type="email" class="form-control border-0" placeholder="Email" style="background:#e0e0e0;box-shadow:inset 4px 4px 8px #bebebe,inset -4px -4px 8px #ffffff">
    <label>Email address</label>
  </div>
  <div class="form-floating mb-4">
    <input type="password" class="form-control border-0" placeholder="Password" style="background:#e0e0e0;box-shadow:inset 4px 4px 8px #bebebe,inset -4px -4px 8px #ffffff">
    <label>Password</label>
  </div>
  <button type="submit" class="btn w-100" style="background:#e0e0e0;padding:10px 20px;border-radius:12px;border:none;box-shadow:4px 4px 10px #bebebe,-4px -4px 10px #ffffff;font-weight:bold">Login</button>
</form>