DevToolBox

👆 CSS pointer-events Generator

Control how elements respond to pointer events and clicks

Select pointer-events Value

Interactive Demo

Background Layer (always clickable)
Overlay Layer
pointer-events: auto

✗ Overlay blocks clicks - button is not clickable

Generated CSS

pointer-events: auto;

Common Use Cases

🎯 Click-Through Overlays
pointer-events: none;
🔒 Disabled Elements
pointer-events: none;
🖼️ Interactive SVG
pointer-events: visible;
↩️ Reset to Default
pointer-events: auto;