Focus ring with box-shadow

When to use it

Every interactive element on a page needs a visible focus indicator, and the browser's default outline is rarely a good fit for a designed interface: it is often a thin blue rectangle that ignores the element's rounded corners. The ring on this page is the one every button, link, slider and chip in the generator wears when it has keyboard focus. WCAG's focus-visible criterion is the requirement behind it, and it is a requirement, not a preference: any keyboard-operable interface must have a mode where the focused element is visibly indicated.

How it is built

Two shadows, neither blurred, both spread-only. The first is in the page's own colour, 2 pixels wide: a gap. The second is the ring colour, 4 pixels wide, which after the gap shows as a 2 pixel line. The gap is what makes the ring work everywhere: on a dark button, on a photograph, on a card that already has a shadow, the ring always sits on a known strip of page colour, so its contrast is the same in every position.

:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #f5f7fa,   /* gap, in the page colour */
    0 0 0 4px #263eb6;   /* ring                    */
}

The generator's own version is a token, so it can be appended to whatever shadow an element already carries:

:root {
  --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--brand);
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-1), var(--focus-ring);
}

Use :focus-visible rather than :focus. MDN describes it as applying when the browser determines "that the focus should be made evident on the element", which in practice means keyboard focus shows the ring and a mouse click does not, so the design is not covered in rings after every click.

box-shadow or outline?

The honest answer is that outline has caught up. It follows border-radius in every current browser, outline-offset gives you the gap, and it has one property a shadow does not: it survives Windows High Contrast Mode, where all box shadows are stripped. The shadow ring's advantages are that it composes with the element's existing shadow in one declaration, and that the gap can be a colour other than transparent. The approach the generator takes is both. The :focus-visible rule sets a 2 pixel outline with an offset, which is what high-contrast users get, and components with their own shadows add the ring token as well. Belt and braces, and nobody is left without a ring.

Notes and limits

Contrast is the thing to check: WCAG 2.2's non-text contrast criterion wants 3:1 between the ring and what is next to it, which the gap ring makes easy to guarantee. The ring must not be clipped, so a focusable element inside a container with overflow: hidden needs padding for the 4 pixels the ring extends, or it loses its top and bottom edges. And the newer focus-not-obscured criterion adds that a sticky header or a cookie bar must not cover the focused element, which is a layout concern rather than a shadow one, but it is the same requirement seen from the other side: the user has to be able to see where they are.

The code in four formats

Straight from the generator's readout for this state. Copy the one your project speaks; the output formats guide explains where each goes.

box-shadow:
  0 0 0 2px rgba(245, 247, 250, 1),
  0 0 0 4px rgba(38, 62, 182, 1);
border-radius: 8px;

$shadow:
  0 0 0 2px rgba(245, 247, 250, 1),
  0 0 0 4px rgba(38, 62, 182, 1);

.element {
  box-shadow: $shadow;
  border-radius: 8px;
}

<div class="shadow-[0_0_0_2px_rgba(245,247,250,1),_0_0_0_4px_rgba(38,62,182,1)] rounded-[8px]"></div>

/* Or name it once in your theme (Tailwind v4): */
@theme {
  --shadow-custom: 0 0 0 2px rgba(245, 247, 250, 1), 0 0 0 4px rgba(38, 62, 182, 1);
}
/* then use class="shadow-custom" */

.element
  box-shadow 0 0 0 2px rgba(245, 247, 250, 1), 0 0 0 4px rgba(38, 62, 182, 1)
  border-radius 8px