OBS Keystroke & Mouse Click Transparent Overlay HUD
Real-time responsive WASD keys, Spacebar, Shift, and Mouse clicks overlay with neon themes and instant transparency for Twitch & Kick streams.
Click this window and press WASD, Shift, Space, or Click to test live.
- In OBS Studio Sources, click + -> Browser.
- Paste URL:
https://nickcraft.xyz/obs-stream-keystroke-overlay-hud/ - Set Width: 500, Height: 400.
- Paste this into OBS Custom CSS to make background 100% transparent:
main, body, html { background: transparent !important; } nav, header, .border-b, .faq, footer { display: none !important; } #hudBox { background: transparent !important; border: none !important; box-shadow: none !important; }
Frequently Asked Questions
How do I add this keystroke overlay into OBS Studio as a transparent source?
1. Copy this page URL. 2. In OBS, click '+' under Sources and select 'Browser'. 3. Paste the URL. 4. Set Width: 480 and Height: 380. 5. Click the 'Transparent OBS Mode' button on this page (or add 'body { background: transparent !important; }' to Custom CSS in OBS) and click OK.
Why do viewers love keystroke overlays on FPS streams?
In games like CS2, Valorant, Fortnite, and Apex Legends, movement mechanics (counter-strafing, tap-strafing, superglides, and bunny hopping) happen in fractions of a second. An overlay allows viewers to see your exact key presses and finger rhythm in real time.
Does this keystroke overlay consume CPU or GPU resources?
No. Unlike bulky third-party desktop overlays (NohBoard), this lightweight web app runs via native browser DOM event listeners with hardware-accelerated CSS transforms, consuming virtually 0% CPU.
Does OBS capture keys while I am tabbed into a full-screen game?
OBS Browser Sources run in their own sandbox. For in-game capture while focused on full-screen games, open this page in a separate browser window and capture it via OBS Window Capture or use OBS WebSocket / hotkey pass-through.