FREE CSS COMPONENT

Modal

Use a modal only for focused tasks that should temporarily interrupt the current workflow.

Live preview

HTML

<div class="demo-modal" role="dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Delete record?</h2>
  <p>This action cannot be undone.</p>
</div>

CSS

.demo-modal{padding:24px;border-radius:8px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.18);border:1px solid #ddd}.demo-modal strong{display:block;color:#111;margin-bottom:8px;font:600 18px Inter,sans-serif}.demo-modal p{margin:0;color:#666;font:14px/1.5 Inter,sans-serif}