← Back to gallery
CSS

Custom Focus Indicator Variants

Three focus-visible treatments — solid ring, underline + color shift, and soft box-shadow glow — each pairing a non-color signal with a color signal so focus stays visible across contrast modes.

Duration
1s
Resolution
1440×900
Format
CSS
focus-visiblefocus-ringbox-shadowunderlineaccessibility

Form / focus-visible / non-color signal

Custom focus indicator variants

Three focus-visible treatments that each pair a non-color signal — outline width, underline, or box-shadow shape — with a color signal so focus stays legible across contrast modes.

solid ring — signal ring

Tab to the button.

Classic high-contrast outline

Solid Ring

A solid outline sits offset outside the control, anchoring focus with maximum contrast while staying outside of the rendering box.

  • outline
  • offset
  • high contrast

Tab to the button.

Text-style focus for inline controls

Underline + Color

Focus-visible draws a thick underline plus a color shift on the label — the non-color signal prevents focus from relying on chroma alone.

  • underline
  • color shift
  • inline

Tab to the button.

Box-shadow ring for rounded surfaces

Soft Glow

A soft box-shadow ring follows the border-radius and layers above the background, preserving focus visibility on heavily rounded buttons.

  • box-shadow
  • rounded
  • pill

Focus indicator inspector

Solid Ring

Tab to the button, then tweak the sliders.

Signal
ring
Color
#7dd3fc

Strongest option for dense UI. Works across themes and forced-colors mode because outline carries non-color shape plus color together.

css
.focus-target:focus-visible {
  outline: 2px solid #7dd3fc;
  outline-offset: 3px;
}