Why devs groan
Scroll lock, focus rings, overlay clicks, and theming across browsers—modals are a pain.
Dark‑mode aware, animated, focusable, and no JS—uses the :target trick.
Scroll lock, focus rings, overlay clicks, and theming across browsers—modals are a pain.
CSS‑only open/close, dark mode, click‑outside to close, and page scroll lock via :has().
No Escape‑key or focus trap without JS. Works great for simple dialogs.
This dialog is opened by linking to #demo-modal. Closing just links to #.
It’s themeable: tweak --brand, --accent, radius, and shadows once.
©2025 Avalynn Circe — CSS‑only demo. Free to use.