Slide Up Modal

A slide up modal built with pure HTML and CSS that enters the viewport from the bottom edge, presenting content in a way that feels connected to the current screen while avoiding a full-page interruption.

Usage

This component is ideal for interfaces where temporary panels should appear from below, such as mobile-style dialogs, quick settings panels, short forms, or secondary actions that should not fully replace the main view.

Implementation

The upward motion is created using CSS transforms, translateY positioning, and transition timing, allowing the modal to animate smoothly from the bottom into its visible state while remaining lightweight and reusable.

HTML

<div class="ss-modal slide-up">
  <div class="ss-modal-panel">
    <h3>Slide-Up Modal</h3>
    <p>Great for mobile UI.</p>
  </div>
</div>

<div class="ss-modal slide-up">
  <div class="ss-modal-panel">
    <h3>Slide-Up Modal</h3>
    <p>Great for mobile UI.</p>
  </div>
</div>

CSS

.ss-modal{
  max-width:420px;
  margin:auto;
  display:flex;
  justify-content:center;
}

.ss-modal-panel{
  background:#ffffff;
  color:#111827;
  width:100%;
  padding:16px;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.15);

}

.ss-modal-panel p{
  font-size:14px;
  color:#4b5563;
}

@keyframes slideUp{
  0%{ transform:translateY(20px); opacity:0 }
  50%{ transform:translateY(0); opacity:1 }
  100%{ transform:translateY(20px); opacity:0 }
}

@media (prefers-color-scheme: dark){
  .ss-modal-panel{
    background:#141414;
    color:#e5e7eb;
  }
  .ss-modal-panel p{
    color:#9ca3af;
  }
}

.ss-modal{
  max-width:420px;
  margin:auto;
  display:flex;
  justify-content:center;
}

.ss-modal-panel{
  background:#ffffff;
  color:#111827;
  width:100%;
  padding:16px;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.15);

}

.ss-modal-panel p{
  font-size:14px;
  color:#4b5563;
}

@keyframes slideUp{
  0%{ transform:translateY(20px); opacity:0 }
  50%{ transform:translateY(0); opacity:1 }
  100%{ transform:translateY(20px); opacity:0 }
}

@media (prefers-color-scheme: dark){
  .ss-modal-panel{
    background:#141414;
    color:#e5e7eb;
  }
  .ss-modal-panel p{
    color:#9ca3af;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Animates upward from the bottom edge
• Preserves spatial relation to the main interface
• Suitable for compact, temporary panels
• Works in modern browsers

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.