← Back to gallery
CSS

Focus Ring Pulse Spacing

A keyboard-visible focus ring that breathes outward by animating outline-offset between two small length values, keeping the box model stable and respecting prefers-reduced-motion.

Duration
2s
Resolution
1440×900
Format
CSS
focus-ringpulseoutline-offsetkeyboard-a11yreduced-motion

Focus / outline-offset / keyboard a11y

Focus ring pulse spacing

Reimplements a keyboard-visible focus ring that breathes outward by animating outline-offset, so the element box never shifts and prefers-reduced-motion can freeze the ring at its widest point.

primary button focus active — 1.8s breathing cycle

Outward breathing ring

Primary Button

A high-contrast focus ring that pulses out from the button edge using outline-offset so the button chrome stays pinned in place.

  • button
  • :focus-visible
  • outline-offset

Review the before publishing.

Compact hover-free focus

Inline Link

A tighter pulse tuned for inline text links so the outline stays readable against prose without pushing neighboring words around.

  • inline-link
  • text-baseline
  • small offset

Field with caret + ring

Form Field

A broader breathing ring paired with an input caret so focus feels confirmed even when the field already has a visible border.

  • input
  • text-field
  • wider offset

Focus ring inspector

Primary Button

Tab onto the control to see the live focus ring.

Offset range
2px → 6px
Cycle
1.8s ease-in-out

Keep the outline width and color fixed for legibility, then animate outline-offset between a tight and relaxed value to give keyboard users a calm, steady heartbeat of focus.

css
.focus-ring-target:focus-visible {
  outline: 2px solid #7dd3fc;
  outline-offset: 2px;
  animation: focusRingPulse 1.8s ease-in-out infinite;
}

@keyframes focusRingPulse {
  0%, 100% { outline-offset: 2px; }
  50%      { outline-offset: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .focus-ring-target:focus-visible {
    animation: none;
    outline-offset: 6px;
  }
}