# Keyboard focus style preview

> Preview focus indicators against a chosen background color.

[Open tool](https://www.toolcabana.com/sc/keyboard-focus-style-preview) · [Accessibility and inclusive design](https://www.toolcabana.com/sc/category/accessibility-and-inclusive-design)

Tool ID: keyboard-focus-style-preview. Requested language: sc. Description language: en. Complete guide translation: no; untranslated sections use English.

## Overview (en)

The keyboard focus style preview shows a sample button wearing the focus ring you design and generates the matching :focus-visible CSS rule. Pick the ring color and the background it sits on, then set ring width from 1 to 10 pixels and offset from 0 to 20 pixels. The output is a ready-to-paste outline and outline-offset declaration.

## Supported tasks (en)

Preview focus indicators against a chosen background color.

## Steps (en)

1. Enter the requested values in the settings panel.
2. Adjust the basic settings, then open Advanced mode for export and fine-tuning options. Custom settings stay active when the panel is closed.
3. Run keyboard focus style preview, review the output, then use the available copy or download controls.

## Settings

- Focus ring (en; key: color; type: color)
- Background (en; key: background; type: color)
- Ring width (px) (en; key: width; type: number); minimum: 1; maximum: 10
- Ring offset (px) (en; key: offset; type: number); minimum: 0; maximum: 20

## Limitations (en)

Images use the existing 32-megapixel canvas bound. Up to 100 source images are allowed where supported. Pasted HTML is bounded to 200,000 characters; Mermaid diagrams to 20,000 characters and 300 lines. SVG and PNG generation require a browser.

## Privacy and connections (en)

This operation processes its source in your browser. Copy and download are explicit actions; source input is not saved in an account or history.

## Questions (en)

### What CSS does the focus style preview generate?

A :focus-visible rule with a solid outline in your width and color, plus an outline-offset value, for example outline: 3px solid #2563eb with outline-offset: 3px. Paste it into your stylesheet and narrow the selector if needed.

### Why use :focus-visible instead of :focus for focus rings?

Browsers apply :focus-visible mainly when focus should be visible, such as during keyboard navigation, so clicking a button with a mouse usually does not draw the ring. That keeps a clear keyboard indicator without affecting pointer users.

### Does the preview check focus ring contrast?

No. It is a static visual preview that shows the ring against your chosen background but does not calculate a contrast ratio. Check the colors with a contrast tool and verify tab navigation in the finished application.

### Where is my input processed?

This operation processes its source in your browser. Copy and download are explicit actions; source input is not saved in an account or history.

### What are the input limits?

Images use the existing 32-megapixel canvas bound. Up to 100 source images are allowed where supported. Pasted HTML is bounded to 200,000 characters; Mermaid diagrams to 20,000 characters and 300 lines. SVG and PNG generation require a browser.

## Related tools

- [Color vision preview](https://www.toolcabana.com/sc/color-vision-preview)
- [Accessible palette adjuster](https://www.toolcabana.com/sc/accessible-palette-adjuster)
- [HTML heading outline checker](https://www.toolcabana.com/sc/html-heading-outline-checker)
- [Image alternative text worksheet](https://www.toolcabana.com/sc/image-alternative-text-worksheet)