Focus Ring Tester

Outline · box-shadow focus style preview

Outline width (px)

Outline offset (px)

Outline colour

CSS selector

:focus-visible

:focus

Keyboard only (recommended)

solid

dashed

dotted

Add box-shadow ring

Focus a control below (click or press Tab) to preview its focus ring.

CSS

:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

How to use

Adjust outline width, offset, and colour using the numeric inputs and colour picker.
Choose outline style: solid, dashed, or dotted.
Optionally enable box-shadow and set its spread and colour for a dual-ring effect.
Tab into the preview button or input to see the focus ring rendered live.
Copy the generated CSS to use in your own stylesheet.

Examples

Setting width 3px, offset 2px, colour #0066FF, style solid produces outline: 3px solid #0066FF; outline-offset: 2px; visible on the preview button when focused.
Enabling box-shadow with spread 4px and colour rgba(0,102,255,0.4) adds a soft glow ring around the outline.