⌨️

Keyboard Tester

Q: What is the difference between key and code?

key is the logical key value (depends on keyboard layout and modifiers, e.g. "A" or "a" for the same key). code is the physical key position (always "KeyA" regardless of layout or shift state).

Press any key to test it. Keys light up and key event details are shown.

Click inside this tool area, then press any key to test it.

Esc

F10

F11

F12

PrtSc

ScrLk

Pause

Bksp

Ins

Home

PgUp

Tab

[

]

Del

End

PgDn

Caps

;

Enter

Shift

↑

Ctrl

Win

Alt

Space

Alt

Win

Ctrl

←

↓

→

Key

—

Code

—

keyCode

—

which

—

charCode

—

Modifiers

Alt Ctrl Shift Meta

0 / 0 keys tested

Event Log (last 20)

Press keys to see events...

About Keyboard Tester

Designing for the web often involves fine-tuning visual properties until they look just right. Keyboard Tester gives you an interactive playground to press any key to test it. keys light up and key event details are shown and instantly see the result. When you're happy with the output, copy the generated CSS code and paste it into your stylesheet — no guesswork needed.

How to Use

Adjust the visual controls Use sliders, color pickers, and dropdowns to customize the design properties. The preview updates in real time.

Fine-tune the result Experiment with different values until the design looks exactly the way you want it.

Copy the CSS code Click the Copy button to copy the generated CSS code. It's production-ready and includes vendor prefixes where needed.

Paste into your project Add the copied CSS to your stylesheet. The code works in all modern browsers without modification.

🔒 Privacy note: All processing happens locally in your browser. Your data is never sent to any server.

Why Use Keyboard Tester?

🎨

Visual Live Preview See your changes in real time as you adjust values. No more guessing what CSS properties will look like — experiment visually and copy the code.

📋

Production-Ready CSS The generated code is clean, optimized, and ready to paste directly into your stylesheet. Includes vendor prefixes where needed for cross-browser support.

🔧

Faster Than Hand-Coding What takes 10 minutes of CSS trial-and-error takes 10 seconds with Keyboard Tester. Adjust sliders and dropdowns instead of editing numbers in code.

💡

Learn CSS Visually Perfect for CSS beginners who want to understand how properties affect visual output. Experiment with values and see the relationship between code and design.

Frequently Asked Questions

Some keys like F5 (refresh), F12 (DevTools), Ctrl+W (close tab) are captured by the browser before reaching the page. These system-level shortcuts cannot be intercepted by web apps.

key is the logical key value (depends on keyboard layout and modifiers, e.g. "A" or "a" for the same key). code is the physical key position (always "KeyA" regardless of layout or shift state).

Press the key combination you want to inspect. The info panel shows all event properties including which modifiers (Alt, Ctrl, Shift, Meta) are active, making it easy to build the correct event listener condition in your code.