CSS focus state generator

How to use the CSS focus state generator

  1. Pick a base element: button, input, link, or custom.
  2. Set outline color, width, offset, and style — or switch to box-shadow for smoother edges.
  3. Preview in keyboard-only mode (focus-visible) and click-focus mode side by side.
  4. Copy the CSS — includes :focus-visible with a :focus fallback for older browsers.

When to use it

Build accessible focus states when your design system overrides default browser focus rings. A missing focus indicator is a WCAG 2.1 failure and breaks keyboard navigation for motor-impaired users. Use :focus-visible so keyboard users see the ring but mouse users don't. Don't remove the ring without a replacement — that's the single worst accessibility mistake on the modern web. Alternative: inbox styling like Material Design Ripple but done via CSS instead of JS.

Frequently asked questions

What's the difference between :focus and :focus-visible?
:focus applies any time an element has focus. :focus-visible only applies when focus was reached via keyboard. Use :focus-visible to show a ring for keyboard users without distracting mouse users.
Why is my button focus ring invisible on dark backgrounds?
Outlines default to the browser's color which adapts poorly across themes. Set outline-color explicitly and ensure 3:1 contrast with the adjacent surface.
Should I use outline or box-shadow?
outline-offset can't create curves matching border-radius — for rounded buttons, box-shadow produces a smoother ring that follows the shape. Outline is simpler for rectangular elements.
Does removing focus from outline: none break accessibility?
Only if you don't replace it. outline: none + box-shadow: 0 0 0 2px ... + :focus-visible is accessible as long as the replacement is visible against its background.

Related tools

Last updated: 2026-04-22