Focus Ring Tester

Outline · box-shadow focus style preview

Outline width (px)

Outline offset (px)

Outline color

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 color using the numeric inputs and color picker.
Choose outline style: solid, dashed, or dotted.
Optionally enable box-shadow and set its spread and color 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, color #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 color rgba(0,102,255,0.4) adds a soft glow ring around the outline.