Modal Generator

Generate popup modal components with backdrop and animations

Modal Size

600px
400px
12px

Backdrop

0.5
0px

Animation

0.3s

Presets

Live Preview

Modal Title

Modal content goes here.

Generated CSS

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.modal {
  background: white;
  width: 600px;
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}