← Visual Library / Forms

Input focus ring with offset

When the user clicks into an input, a ring appears around it with a small white-space offset between the field's border and the ring. Pro touch for forms.

Forms Built

Use when — any form input that benefits from a clear focus state — contact forms, search bars, login fields. Critical for accessibility (keyboard users) and just looks expensive.

Live demo

Message

↑ Click into any field.

CSS

input, textarea {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
input:focus, textarea:focus {
  border-color: var(--accent);
  /* Two stacked box-shadows = ring-with-offset */
  box-shadow:
    0 0 0 3px white,           /* offset gap (matches page bg) */
    0 0 0 5px var(--accent);   /* the actual ring */
}

The technique

CSS doesn't have a native "ring-offset" property. The trick is to stack two box-shadows. The first is the offset (matching the page bg color); the second is the actual ring. Both spread from the element's border edge outward.

If your page bg isn't white, change white to whatever your section bg is.

Dials

Offset thickness: 3px is the canonical sweet spot. 2px reads tight; 5px reads too gappy.

Ring color: the brand accent. For destructive actions, use red.

Transition: 250ms feels snappy. Don't drag this out — users want immediate feedback that they've focused something.

Accessibility note

Don't remove the focus outline without replacing it with something at least as visible. Keyboard users navigate by Tab and need to see where they are.

Source: Jono Catliff masterclass, 2026-05-19. See masterclass notes.