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.