🎯Dev

Focus-Visible CSS Snippet

Builds a ready-to-paste :focus-visible rule from an outline colour and a thickness in pixels, with 2px offset, for the WCAG 2.4.7 focus indicator.

Outline colour

Thickness (px)

CSS

—

Removing the ugly outline without blinding keyboard users

The outline a browser draws around the focused element is the main resource for anyone navigating by keyboard: without it, there is no telling where you are. Even so, one of the first things many stylesheets do is erase it with outline none, because it also shows up on mouse clicks, which bothers the design.

The focus-visible pseudo-class settles that standoff. The browser applies it only when it judges the indicator useful — keyboard focus, yes; a mouse click on a button, no. Pick the colour and the thickness and the page assembles the pair of rules: it zeroes the default outline and draws yours under focus-visible, with an offset so the outline does not touch the element edge.

On choosing colour and thickness, WCAG 2.2 adds a new criterion, 2.4.11, asking for at least 3 to 1 contrast between the focus indicator and what was there before, plus a minimum area. Two pixels usually suffice; one pixel in a low-contrast colour goes unnoticed on a light screen. And mind border-radius: an outline on a rounded element follows the curve in current browsers, but comes out rectangular in older ones.

Frequently asked questions

Can I use box-shadow instead of outline?

You can, and it sometimes looks better, but there is a cost: box-shadow disappears in Windows forced high-contrast mode, while outline survives. People using a shadow usually add a transparent outline as well, invisible normally and reappearing in high contrast.

Does focus-visible work in every browser?

In current ones, yes, including Safari since 15.4. For an older browser, the safe pattern is declaring a plain focus rule first and overriding it with focus-visible: whoever does not understand the second keeps an always-visible indicator, which is the milder defect.

What about :focus-within?

That is a different thing: it matches the element containing focus, not the focused element. It serves to highlight a whole card or field when something inside receives focus — useful combined with focus-visible, not a replacement for it.

Related Tools

⏭️

Skip Link Snippet

Takes the id of your main content region and returns the anchor plus CSS for a skip link that stays off-screen until it takes focus (WCAG 2.4.1).

🎬

prefers-reduced-motion CSS

Builds the @media (prefers-reduced-motion: reduce) block that neutralises animations, transitions and smooth scrolling, page-wide or only inside .anima.

📦

CSS Minifier

Minify CSS by removing comments, extra whitespace and line breaks. Reduces file size without changing behavior.

🟢

CSS Neumorphism Generator

Create Soft UI (neumorphism) effects with two complementary box-shadows. Adjust base color, distance, blur and type (raised, flat, pressed). Copy ready CSS. Everything in your browser.

🌈

CSS Gradient Generator

Create linear and radial CSS gradients with real-time preview. Adjust colors, positions and angle. Copy the CSS code with one click.

🎯

CSS Specificity Calculator

Compute the specificity (a, b, c) of a CSS selector — IDs, classes/attributes/pseudo-classes, elements. Useful to understand why your rule is not applying. Everything in your browser.