~/css/kbd-keys

7 CSS Kbd Keys

5 Pure CSS2 with JSPublished 2026-10-05Free · no sign-up

Seven ways to show keyboard keys: shortcuts inside a sentence, chunky 3D keycaps, Mac modifier symbols with readable names, a shortcut reference list, keys that light up when you press them, an arrow key cluster and a search field that shows its command palette shortcut.

Filter demos

01. Shortcuts in Running Text

kbdTypography

Keyboard shortcuts written inside a sentence with kbd elements, nested so that each key in a combination is its own kbd inside an outer kbd. The keys are small, with a bottom border for a hint of depth that does not disturb the line height.

View code

<p class="kbd1">Press <kbd><kbd>Ctrl</kbd> + <kbd>K</kbd></kbd> to search, or <kbd>?</kbd> to see all shortcuts.</p>

.kbd1 { width: 340px; max-width: 100%; margin: 0; color: #344054; font: 15px/1.8 Inter, system-ui, sans-serif; }
.kbd1 kbd kbd, .kbd1 > kbd { padding: 1px 6px; border: 1px solid #d0d5dd; border-bottom-width: 2px; border-radius: 5px; background: #f9fafb; color: #101828; font: 600 12px "JetBrains Mono", ui-monospace, monospace; }
.kbd1 kbd:has(kbd) { padding: 0; border: 0; background: none; font: inherit; }

02. 3D Keycap

kbd3D

A chunky keycap with a raised face, made from a gradient face and a deep bottom border. Clicking it presses it down by shrinking the bottom border and moving it, a satisfying detail for keyboard-themed brands.

View code

<div class="kbd2"><kbd>Esc</kbd><kbd>Tab</kbd><kbd class="w">Space</kbd></div>

.kbd2 { display: flex; flex-wrap: wrap; gap: 8px; }
.kbd2 kbd { display: grid; place-items: center; min-width: 54px; height: 50px; padding: 0 10px; box-sizing: border-box; border: 1px solid #0b1020; border-bottom: 6px solid #0b1020; border-radius: 10px; background: linear-gradient(#334155, #1e293b); color: #e2e8f0; font: 700 13px Inter, system-ui, sans-serif; cursor: pointer; transition: transform .08s, border-bottom-width .08s; user-select: none; }
.kbd2 .w { min-width: 140px; }
.kbd2 kbd:active { transform: translateY(4px); border-bottom-width: 2px; }

03. Mac Modifier Symbols

kbdMac

macOS shortcuts use symbols (⌘ ⇧ ⌥ ⌃) that many people cannot name, so each symbol sits in an abbr with a title and a visually hidden word, giving screen readers Command, Shift, P rather than unreadable glyphs.

View code

<p class="kbd3">Open the command palette: <kbd><kbd><abbr title="Command">⌘</abbr><span class="sr">Command</span></kbd><kbd><abbr title="Shift">⇧</abbr><span class="sr">Shift</span></kbd><kbd>P</kbd></kbd></p>

.kbd3 { margin: 0; color: #344054; font: 15px Inter, system-ui, sans-serif; }
.kbd3 kbd:has(kbd) { display: inline-flex; gap: 4px; vertical-align: middle; }
.kbd3 kbd kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px; box-sizing: border-box; border: 1px solid #d0d5dd; border-bottom-width: 2px; border-radius: 6px; background: #fff; color: #101828; font: 600 14px Inter, system-ui, sans-serif; }
.kbd3 abbr { text-decoration: none; } .kbd3 abbr[title] { cursor: help; }
.kbd3 .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

04. Shortcut Reference List

kbdReference

A keyboard shortcuts panel as a description list: the action on the left as the term, the keys on the right as the description. A dl pairs each shortcut with its action for screen readers, and the layout is a two-column grid.

View code

<dl class="kbd4"><div><dt>Search</dt><dd><kbd>/</kbd></dd></div><div><dt>New item</dt><dd><kbd>N</kbd></dd></div><div><dt>Save</dt><dd><kbd>Ctrl</kbd> <kbd>S</kbd></dd></div><div><dt>Close panel</dt><dd><kbd>Esc</kbd></dd></div></dl>

.kbd4 { display: grid; gap: 2px; width: 280px; max-width: 100%; margin: 0; padding: 8px; box-sizing: border-box; border-radius: 12px; background: #111727; font: 14px Inter, system-ui, sans-serif; }
.kbd4 div { display: flex; align-items: center; justify-content: space-between; padding: 8px 6px; border-bottom: 1px solid #1f2937; } .kbd4 div:last-child { border-bottom: 0; }
.kbd4 dt { color: #cbd5e1; } .kbd4 dd { display: flex; gap: 4px; margin: 0; }
.kbd4 kbd { padding: 2px 7px; border: 1px solid #334155; border-bottom-width: 2px; border-radius: 5px; background: #1e293b; color: #f8fafc; font: 600 12px "JetBrains Mono", ui-monospace, monospace; }

05. Keys That Light Up When Pressed

kbdInteractive

Press W, A, S or D (or the arrow keys) while the area has focus and the matching keycap lights up, the kind of hint used in games and keyboard tutorials. The area is a focusable group with instructions, and keys are matched with event.code so layouts do not matter.

View code

<div class="kbd5" tabindex="0" role="group" aria-label="Key tester. Press W, A, S or D."><p>Focus here, then press W A S D</p><div class="pad"><kbd data-c="KeyW">W</kbd><kbd data-c="KeyA">A</kbd><kbd data-c="KeyS">S</kbd><kbd data-c="KeyD">D</kbd></div></div>

.kbd5 { display: grid; justify-items: center; gap: 10px; width: 260px; max-width: 100%; padding: 14px; box-sizing: border-box; border: 1px dashed #d0d5dd; border-radius: 14px; font: 13px Inter, system-ui, sans-serif; color: #475467; }
.kbd5:focus-visible { outline: 3px solid #84adff; outline-offset: 2px; border-style: solid; }
.kbd5 p { margin: 0; }
.kbd5 .pad { display: grid; grid-template-columns: repeat(3, 44px); grid-template-areas: ". w ." "a s d"; gap: 6px; }
.kbd5 kbd { display: grid; place-items: center; height: 44px; border: 1px solid #d0d5dd; border-bottom-width: 3px; border-radius: 8px; background: #fff; color: #101828; font: 700 15px Inter, system-ui, sans-serif; transition: background .1s, transform .1s; }
.kbd5 [data-c=KeyW] { grid-area: w; } .kbd5 [data-c=KeyA] { grid-area: a; } .kbd5 [data-c=KeyS] { grid-area: s; } .kbd5 [data-c=KeyD] { grid-area: d; }
.kbd5 kbd.on { background: #7f56d9; border-color: #53389e; color: #fff; transform: translateY(2px); }

var box = document.querySelector('.kbd5'), map = { ArrowUp: 'KeyW', ArrowLeft: 'KeyA', ArrowDown: 'KeyS', ArrowRight: 'KeyD' };
function key(e, on) { var c = map[e.code] || e.code, k = box.querySelector('[data-c=' + c + ']'); if (k) { k.classList.toggle('on', on); if (map[e.code]) e.preventDefault(); } }
box.addEventListener('keydown', function (e) { key(e, true); }); box.addEventListener('keyup', function (e) { key(e, false); });

06. Arrow Key Cluster

kbdArrows

The inverted-T arrow cluster used in game instructions and accessibility help pages, with each arrow's name in a visually hidden span so a screen reader says Up arrow rather than reading a symbol.

View code

<p class="kbd6"><span class="lbl">Move with</span><span class="cl"><kbd class="u">↑<span class="sr"> Up arrow</span></kbd><kbd class="l">←<span class="sr"> Left arrow</span></kbd><kbd class="d">↓<span class="sr"> Down arrow</span></kbd><kbd class="r">→<span class="sr"> Right arrow</span></kbd></span></p>

.kbd6 { display: flex; align-items: center; gap: 14px; margin: 0; color: #cbd5e1; font: 14px Inter, system-ui, sans-serif; }
.kbd6 .cl { display: grid; grid-template-columns: repeat(3, 36px); grid-template-areas: ". u ." "l d r"; gap: 4px; }
.kbd6 kbd { display: grid; place-items: center; height: 36px; border: 1px solid #0b1020; border-bottom-width: 4px; border-radius: 7px; background: #334155; color: #f8fafc; font: 700 16px Inter, system-ui, sans-serif; }
.kbd6 .u { grid-area: u; } .kbd6 .l { grid-area: l; } .kbd6 .d { grid-area: d; } .kbd6 .r { grid-area: r; }
.kbd6 .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

07. Command Palette Hint

kbdUI

A fake search field that shows the shortcut that opens the real command palette, with Ctrl K on Windows and Linux and ⌘K on Mac, chosen by a one-line platform check. The hint is decorative inside a button whose name says what it does.

View code

<button class="kbd7"><span class="ic" aria-hidden="true">⌕</span><span class="t">Search docs</span><kbd aria-hidden="true">Ctrl K</kbd></button>

.kbd7 { display: flex; align-items: center; gap: 10px; width: 280px; max-width: 100%; padding: 9px 10px; border: 1px solid #d0d5dd; border-radius: 10px; background: #fff; color: #475467; font: 14px Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
.kbd7 .t { flex: 1; } .kbd7 .ic { font-size: 16px; }
.kbd7 kbd { padding: 2px 6px; border: 1px solid #d0d5dd; border-radius: 6px; background: #f9fafb; color: #344054; font: 600 12px "JetBrains Mono", ui-monospace, monospace; }
.kbd7:focus-visible { outline: 3px solid #84adff; outline-offset: 2px; }

if (/Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent)) document.querySelector('.kbd7 kbd').textContent = '⌘K';

About these CSS Kbd Keys

kbd for keys

The <kbd> element marks keyboard input. For a combination, nest one kbd per key inside an outer kbd, so Ctrl + K is three elements that are styled and read correctly.

Name the symbols

Mac symbols such as ⌘ and ⇧ are unreadable to many people and to screen readers. Add the word, as a title on an abbr and in visually hidden text.

Match the platform

Show Ctrl on Windows and Linux and ⌘ on Mac. A one-line platform check can switch the label; when unsure, show both.

Lists of shortcuts are definitions

A shortcuts panel pairs an action with keys, which is what a description list (<dl>) is for.

Frequently asked questions

Is there a Tailwind version?

Yes, see the Tailwind kbd keys collection.

Why does the key tester use event.code?

event.code refers to the physical key position, so W A S D work on any keyboard layout.

Should I add custom keyboard shortcuts?

Only with a way to see and turn them off, and never on single printable keys inside text fields.