Underline Sweep

Minimal underline-style input. The bottom border draws outward from the centre on focus — a subtle, premium touch driven by `:focus-within`.

Live DemoMay 4, 2026

Plain CSSTailwind v4

Try it

Build UI like this from scratch: Flexbox, Grid, animations & responsive CSS

ZTM · The CSS Bootcamp · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code

Check ZTM Course

The code

<label class="if-02">
  <span class="if-02-label">Username</span>
  <span class="if-02-wrap">
    <input type="text" name="username" autocomplete="username" placeholder="@codefronts" required />
  </span>
</label>

<label class="if-02">
  <span class="if-02-label">Username</span>
  <span class="if-02-wrap">
    <input type="text" name="username" autocomplete="username" placeholder="@codefronts" required />
  </span>
</label>

.if-02 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.if-02-wrap {
  position: relative;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.if-02-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, #ff6c8a, #ff9a76);
  transition: left 0.3s ease, right 0.3s ease;
}

.if-02-wrap:focus-within::after {
  left: 0;
  right: 0;
}

.if-02 input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 0 9px;
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.if-02 input::placeholder {
  color: #b8b6d4;
}

.if-02 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.if-02-wrap {
  position: relative;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.if-02-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, #ff6c8a, #ff9a76);
  transition: left 0.3s ease, right 0.3s ease;
}

.if-02-wrap:focus-within::after {
  left: 0;
  right: 0;
}

.if-02 input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 0 9px;
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.if-02 input::placeholder {
  color: #b8b6d4;
}

Here's a working CSS Input Field 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: Underline Sweep
Source: https://codefronts.com/components/css-input-fields/underline-sweep/

Minimal underline-style input. The bottom border draws outward from the centre on focus — a subtle, premium touch driven by `:focus-within`.
## HTML
```html
<label class="if-02">
  <span class="if-02-label">Username</span>
  <span class="if-02-wrap">
    <input type="text" name="username" autocomplete="username" placeholder="@codefronts" required />
  </span>
</label>
```
## CSS
```css
.if-02 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.if-02-wrap {
  position: relative;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.if-02-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, #ff6c8a, #ff9a76);
  transition: left 0.3s ease, right 0.3s ease;
}

.if-02-wrap:focus-within::after {
  left: 0;
  right: 0;
}

.if-02 input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 0 9px;
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.if-02 input::placeholder {
  color: #b8b6d4;
}
```

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 Input Field 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: Underline Sweep
Source: https://codefronts.com/components/css-input-fields/underline-sweep/

Minimal underline-style input. The bottom border draws outward from the centre on focus — a subtle, premium touch driven by `:focus-within`.
## HTML
```html
<label class="if-02">
  <span class="if-02-label">Username</span>
  <span class="if-02-wrap">
    <input type="text" name="username" autocomplete="username" placeholder="@codefronts" required />
  </span>
</label>
```
## CSS
```css
.if-02 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.if-02-wrap {
  position: relative;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.if-02-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, #ff6c8a, #ff9a76);
  transition: left 0.3s ease, right 0.3s ease;
}

.if-02-wrap:focus-within::after {
  left: 0;
  right: 0;
}

.if-02 input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 0 9px;
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.if-02 input::placeholder {
  color: #b8b6d4;
}
```

How this works

An underline-style input where the bottom border animates outward from the horizontal centre on focus. The static hairline sits on the wrapper span's border-bottom, and the animated bar is an ::after pseudo-element positioned left: 50%; right: 50% so it collapses to zero width by default.

The reveal is triggered by :focus-within on the wrapper span, which fires whenever the input inside gains focus. Both left and right transition to 0, letting the gradient bar sweep out symmetrically. Because :focus-within lives on the wrapper — not the input — clicks anywhere on the label surface still trigger the animation, matching how native form UX should feel.

Make it yours

Swap the gradient stops (#ff6c8a and #ff9a76) for any two brand colours — a solid single-colour bar also works if you drop the linear-gradient.
Change the sweep speed by editing the two 0.3s ease transitions on left and right; keep both values identical to preserve symmetry.
Reverse the direction (edges to centre) by starting the bar at left: 0; right: 0 and animating both to 50%.
Bump the bar thickness by changing height: 2px to 3px, and darken the resting hairline (rgba(255,255,255,0.14)) if it disappears on lighter backgrounds.

Gotchas — read before shipping

Removing the wrapper span breaks the effect: ::after needs a positioned ancestor and :focus-within needs a parent to attach to.
On iOS Safari, the input's default -webkit-appearance can add a subtle inner border — reset with -webkit-appearance: none if the underline looks doubled.
The animation triggers on any focusable child, so nesting a button inside the wrapper (for a submit icon) will fire the sweep on button focus too.

Browser support

Chrome	Safari	Firefox	Edge
90+	14+	88+	90+

The :focus-within pseudo-class is supported everywhere; no fallback needed since a missing selector simply leaves the bar centred and invisible.