Back to Snippets

Mobile Swipe-Up Drawer CSS

Replicate the native iOS experience with this bottom sheet drawer. It slides up from the bottom to display extra content or actions, and the backdrop blur keeps the focus right where you want it.

385

#css

#mobile

#drawer

#bottom sheet

#off-canvas

#ios style

#ui

/HTML *CSS ()JS Output Live Updates

* { box-sizing: border-box; }
body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f0f2f5;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.open-btn {
  padding: 12px 24px;
  background: #2563eb;
  color: white;
  border-radius: 99px;
  cursor: pointer;
  font-weight: 500;
}
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
  z-index: 10;
}
.drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  border-radius: 24px 24px 0 0;
  padding: 20px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 20;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
}
.handle {
  width: 40px;
  height: 5px;
  background: #e2e8f0;
  border-radius: 10px;
  margin: 0 auto 20px;
}
#drawer-toggle:checked ~ .backdrop {
  opacity: 1;
  visibility: visible;
}
#drawer-toggle:checked ~ .drawer {
  transform: translateY(0);
}
.options {
  list-style: none;
  padding: 0;
}
.options li {
  padding: 15px 0;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.fake-toggle {
  width: 36px;
  height: 20px;
  background: #e2e8f0;
  border-radius: 99px;
}
.danger { color: #ef4444; }

Mobile Swipe-Up Drawer CSS

Share Code Snippet