30 CSS Login Forms13 / 30

Pure CSSMIT licensed

Floating Pill

An ultra-compact login widget that floats above app content like a modular control card — fully pill-shaped, docked to the bottom-centre of the viewport, ideal for mobile web overlays.

Published Updated

Live Demo
Try it

The code

<section class="lf-13">
  <div class="lf-13__app" aria-hidden="true"><span>your app content</span></div>
  <form class="lf-13__pill" novalidate>
    <span class="lf-13__badge" aria-hidden="true">◐</span>
    <label class="lf-13__field"><span class="lf-13__vh">Email</span>
      <input type="email" autocomplete="email" placeholder="Email" required></label>
    <label class="lf-13__field"><span class="lf-13__vh">Password</span>
      <input type="password" autocomplete="current-password" placeholder="Password" required></label>
    <button class="lf-13__go" type="submit" aria-label="Sign in">→</button>
  </form>
</section>
.lf-13,
.lf-13 *,
.lf-13 *::before,
.lf-13 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.lf-13 {
  --accent: oklch(0.6 0.18 285);
  position: relative;
  overflow: hidden;
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  background: #eceaf5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lf-13__app {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #c3bfd6;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: .05em;
  background: repeating-linear-gradient(45deg,#e6e3f2 0 24px,#ecebf6 24px 48px);
}

.lf-13__pill {
  position: absolute;
  left: 50%;
  bottom: calc(2rem + env(safe-area-inset-bottom,0px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(460px,calc(100% - 32px));
  padding: 8px 8px 8px 16px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 9999px;
  box-shadow: 0 20px 50px -18px rgba(40,20,80,.45);
}

.lf-13__badge {
  flex: none;
  font-size: 20px;
  color: var(--accent);
}

.lf-13__field {
  flex: 1;
  min-width: 0;
}

.lf-13__vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lf-13__field input {
  width: 100%;
  height: 44px;
  border: 0;
  background: transparent;
  font-size: 14.5px;
  color: #241b3a;
  padding: 0 6px;
  border-radius: 9999px;
  transition: box-shadow .16s;
}

.lf-13__field input::placeholder {
  color: #9a92b4;
}

.lf-13__field input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px oklch(0.6 0.18 285/.28);
}

.lf-13__field:first-of-type {
  border-right: 1px solid #ddd7ec;
  padding-right: 6px;
}

.lf-13__go {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  font-size: 19px;
  transition: filter .16s,transform .12s;
}

.lf-13__go:hover {
  filter: brightness(1.08);
}

.lf-13__go:active {
  transform: scale(.94);
}

.lf-13__go:focus-visible {
  outline: 3px solid oklch(0.6 0.18 285/.55);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .lf-13__pill {
    flex-wrap: wrap;
    border-radius: 26px;
    padding: 12px;
  }

  .lf-13__field {
    flex: 1 1 100%;
  }

  .lf-13__field:first-of-type {
    border-right: 0;
    border-bottom: 1px solid #ddd7ec;
    padding-bottom: 4px;
  }

  .lf-13__go {
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lf-13 * {
    transition: none!important;
  }
}
/* No JavaScript — a fixed-centre pill (translateX -50%) with a 9999px radius and blur backdrop. */
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Login Form from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Floating Pill
Source: https://codefronts.com/components/css-login-forms/floating-pill/

An ultra-compact login widget that floats above app content like a modular control card — fully pill-shaped, docked to the bottom-centre of the viewport, ideal for mobile web overlays.
## HTML
```html
<section class="lf-13">
  <div class="lf-13__app" aria-hidden="true"><span>your app content</span></div>
  <form class="lf-13__pill" novalidate>
    <span class="lf-13__badge" aria-hidden="true">◐</span>
    <label class="lf-13__field"><span class="lf-13__vh">Email</span>
      <input type="email" autocomplete="email" placeholder="Email" required></label>
    <label class="lf-13__field"><span class="lf-13__vh">Password</span>
      <input type="password" autocomplete="current-password" placeholder="Password" required></label>
    <button class="lf-13__go" type="submit" aria-label="Sign in">→</button>
  </form>
</section>
```
## CSS
```css
.lf-13,
.lf-13 *,
.lf-13 *::before,
.lf-13 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.lf-13 {
  --accent: oklch(0.6 0.18 285);
  position: relative;
  overflow: hidden;
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  background: #eceaf5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lf-13__app {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #c3bfd6;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: .05em;
  background: repeating-linear-gradient(45deg,#e6e3f2 0 24px,#ecebf6 24px 48px);
}

.lf-13__pill {
  position: absolute;
  left: 50%;
  bottom: calc(2rem + env(safe-area-inset-bottom,0px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(460px,calc(100% - 32px));
  padding: 8px 8px 8px 16px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 9999px;
  box-shadow: 0 20px 50px -18px rgba(40,20,80,.45);
}

.lf-13__badge {
  flex: none;
  font-size: 20px;
  color: var(--accent);
}

.lf-13__field {
  flex: 1;
  min-width: 0;
}

.lf-13__vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lf-13__field input {
  width: 100%;
  height: 44px;
  border: 0;
  background: transparent;
  font-size: 14.5px;
  color: #241b3a;
  padding: 0 6px;
  border-radius: 9999px;
  transition: box-shadow .16s;
}

.lf-13__field input::placeholder {
  color: #9a92b4;
}

.lf-13__field input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px oklch(0.6 0.18 285/.28);
}

.lf-13__field:first-of-type {
  border-right: 1px solid #ddd7ec;
  padding-right: 6px;
}

.lf-13__go {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  font-size: 19px;
  transition: filter .16s,transform .12s;
}

.lf-13__go:hover {
  filter: brightness(1.08);
}

.lf-13__go:active {
  transform: scale(.94);
}

.lf-13__go:focus-visible {
  outline: 3px solid oklch(0.6 0.18 285/.55);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .lf-13__pill {
    flex-wrap: wrap;
    border-radius: 26px;
    padding: 12px;
  }

  .lf-13__field {
    flex: 1 1 100%;
  }

  .lf-13__field:first-of-type {
    border-right: 0;
    border-bottom: 1px solid #ddd7ec;
    padding-bottom: 4px;
  }

  .lf-13__go {
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lf-13 * {
    transition: none!important;
  }
}
```

## JavaScript
```js
/* No JavaScript — a fixed-centre pill (translateX -50%) with a 9999px radius and blur backdrop. */
```

How this works

The widget is absolutely centred with the modern left:50%; transform: translateX(-50%) pattern and docked with bottom: 2rem. A large border-radius: 9999px gives the fully-rounded pill silhouette, and the fields sit inline inside it.

It reads as floating via a soft, wide drop shadow and a translucent blur backdrop, so app content shows through faintly. The inline layout uses flex with gap, and each field keeps its own :focus-visible ring inside the pill.

On small screens it widens to the safe area with side insets so it never touches the edges.

Make it yours

  • Dock elsewhere by editing bottom/top and the translate.
  • Recolour from --accent.
  • Switch from pill to rounded-rect by lowering border-radius.
  • Add an avatar chip at the left of the pill for a signed-in preview.

Gotchas — read before shipping

  • Centre with left:50% + translateX(-50%), not margin:auto on a fixed element, for reliable centring.
  • Keep the fields' focus rings inside the pill visible — clipping with overflow:hidden can hide them.
  • Respect safe-area insets on mobile so the pill clears the home indicator.

Browser support

ChromeSafariFirefoxEdge
111+15.4+113+111+

Floor set by oklch(), backdrop-filter as this demo is written. The core technique itself goes back further — Chrome 49+.

Absolute centring, border-radius pills and backdrop-filter are universally supported.

Techniques used in this demo

autocomplete tokensMDN ↗filterMDN ↗backdrop-filterMDN ↗place-items / place-contentMDN ↗oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →