About this snippet

Style the native HTML `kbd` tag to create beautiful keyboard shortcuts for your documentation or web app. These styles provide a tactile 3D look that mimics physical keys.

Size
1.2 KB
Uses
HTML, CSS
Loads
Nothing external
Views
335
<div class="shortcut-container">
  <div class="shortcut">
    <span>Copy</span>
    <div class="keys">
      <kbd>Ctrl</kbd> + <kbd>C</kbd>
    </div>
  </div>
  <div class="shortcut">
    <span>Screenshot</span>
    <div class="keys">
      <kbd>⌘</kbd> + <kbd>Shift</kbd> + <kbd>4</kbd>
    </div>
  </div>
</div>
* { box-sizing: border-box; }
body {
  font-family: system-ui, "Segoe UI", sans-serif;
  background: #f1f5f9;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shortcut-container {
  background: white;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 300px;
}

.shortcut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  color: #475569;
}

kbd {
  background-color: #f8fafc;
  border: 1px solid #cbd5e1;
  border-bottom-width: 3px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  color: #1e293b;
  display: inline-block;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  white-space: nowrap;
}

.keys {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  color: #94a3b8;
}
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source

Keyboard shortcuts

Save