Everything the mouse does, the keyboard does
The old version of this tool had a red drag handle that appeared on hover and only a pointer could use. Rebuilding it, the rule I set was that nothing may be reachable by mouse only. WCAG's keyboard criterion puts the requirement in one line: all functionality must be operable through a keyboard interface. In practice that meant using native form controls wherever one exists, because a real range input and a real button come with keyboard behaviour that thirty years of browser work has already got right, and building the two custom pieces, the shadow handle and the resize grip, to the WAI-ARIA slider pattern.
Tab order follows the page: the stage controls first (handle, resize grip, canvas switch, Copy CSS), then the readout tabs and buttons, then the console from Layers down to My presets. Every focused element shows a two pixel ring in the brand colour with a gap, so it is visible on white, on the dark readout and over a photograph.
The shadow handle and the resize grip
The round handle on the preview box is a button. Tab to it and:
- ← → ↑ ↓
- Move the shadow one pixel.
- Shift + arrow
- Move ten pixels.
- Page Up / Page Down
- Move ten pixels up or down.
- Home
- Centre the shadow (X 0, Y 0).
The corner grip on the box works the same way for size: arrows change the width and height by two pixels, Shift makes it ten. Both follow the WAI-ARIA slider pattern's keyboard interaction, which requires that "Right Arrow: Increase the value of the slider by one step" and "Left Arrow: Decrease the value of the slider by one step", and the pattern's optional Page Up and Page Down for larger steps. Each key press is one undo step, so a wrong nudge is one Ctrl+Z away.
Sliders and number fields
Every slider in the console is a native <input type="range">, so it already does what the slider pattern asks for: arrows step by one, Page Up and Page Down by a larger amount, Home and End go to the minimum and maximum. Next to each slider is a number field with the same range; Tab into it, type a value and press Enter or Tab away, and the shadow updates. The number fields accept the arrow keys too. While a slider has focus the mouse wheel nudges it, with Shift for ten at a time, which is a small thing that saves a lot of dragging.
The colour controls are a native colour picker followed by a hex field. If the picker is awkward in your browser, type into the hex field instead: six hex digits, with or without the hash. A wrong value marks the field red and does not change the shadow.
Layers
The layer chips are a tab list. Tab to the active chip, then:
- ← →
- Move to the previous or next layer. The focused layer becomes the active one.
- Home / End
- First or last layer.
The six icon buttons after the chips are ordinary buttons: add, duplicate, move up, move down, hide or show, remove. After adding or removing a layer, focus lands on the chip that is now active, so you can carry on with the arrows without hunting for it. Each chip's accessible name reads out the full shadow value, so a screen reader user hears "Layer 2: 0 8px 24px rgba(27, 35, 64, 0.12)" rather than just a number.
The readout, copy and share
The four format tabs follow the tabs pattern: Tab to the selected one, then Left and Right arrows switch format and the code updates. The code block itself is focusable, so you can Tab into it and use Ctrl+A, Ctrl+C to copy the text natively. Copy code and Share link are buttons; press them with Enter or Space. The result is written to a status line that assistive technology announces politely, without stealing focus. If the clipboard is blocked, the status says so and the code block is right there to select.
Undo and redo
- Ctrl + Z
- Undo the last change.
- Ctrl + Shift + Z or Ctrl + Y
- Redo.
On a Mac, Cmd works in place of Ctrl. The shortcuts are ignored while focus is in a text field, so undoing a typo in the preset name box behaves as the browser normally would. A slider drag is a single undo step however long it lasts, and so is a handle drag; the history keeps the last sixty steps.
Screen readers and reduced motion
The preview is a picture, and no amount of ARIA makes a picture of a shadow meaningful to someone who cannot see it. So the readout is the authoritative view: it always contains the exact CSS, and the layer chips and the handle carry the numbers in their names. The sequence to rely on is "change a slider, hear the value, Tab to the readout, hear the code". If a screen reader you use trips over any step of it, the contact page is the place to tell me and it will be fixed.
Motion respects the operating system. With reduce motion turned on, the load sequence does not run, the warm light stops following the shadow, hover transitions are removed and the page renders static. MDN's note on the media query is the reason it matters: the setting tells the browser "that the user prefers an interface that removes, reduces, or replaces motion-based animations", because animations like panning or scaling large objects "can trigger discomfort for those with vestibular motion disorders". Nothing in the generator depends on motion to communicate, so nothing is lost.
Frequently asked questions
Can I use the box shadow generator without a mouse?
Yes, completely. Every control is a native form element or a button with a visible focus ring. Tab moves between them, arrow keys change values, Space and Enter press buttons, and Ctrl+Z undoes.
How do I move the shadow with the keyboard?
Tab to the round handle on the preview box and use the arrow keys: one pixel per press, ten with Shift held. Page Up and Page Down move ten pixels vertically and Home returns the shadow to the centre. The X and Y sliders in the console do the same job.
What is the keyboard shortcut for undo in the generator?
Ctrl+Z (Cmd+Z on a Mac) undoes and Ctrl+Shift+Z or Ctrl+Y redoes, whenever focus is not inside a text field. The Undo and Redo buttons under the shadow controls do the same.
How do I switch layers with the keyboard?
Tab to the layer chips, then use Left and Right arrow keys to move between them; Home and End jump to the first and last. The chip that has focus becomes the active layer, so the sliders below follow it.
Does the generator work with a screen reader?
Yes. Every slider has a label and a value with a unit, the layer chips announce their full shadow value, the handle announces its X and Y, and copy and share results are announced through a live region. The preview itself is visual, so the readout is the authoritative view.
Can I turn off the animations?
Set your operating system to reduce motion and the generator honours it: no load sequence, no moving light, no transitions. Everything still works; it just does not move.