Corner Docked Micro Modal

A corner docked micro modal built with pure HTML and CSS that appears anchored to a screen corner, presenting small, focused content without interrupting the main interface or requiring external libraries.

Usage

This component is ideal for non-intrusive interactions such as quick tips, small notifications, mini forms, or assistant-style panels that should remain visible while allowing users to continue interacting with the main layout.

Implementation

The docking behavior is created using CSS fixed positioning, corner alignment, and transition-based visibility, enabling the modal to slide or fade into a corner while remaining lightweight and easy to integrate.

HTML

<div class="modal-corner">
  <div class="modal-corner__panel">
    <span>Saved</span>
    <button>Undo</button>
  </div>
</div>

<div class="modal-corner">
  <div class="modal-corner__panel">
    <span>Saved</span>
    <button>Undo</button>
  </div>
</div>

CSS

.modal-corner {
  width: 200px;
  display: flex;
  justify-content: flex-end;
}

.modal-corner__panel {
  padding: 0.6rem 0.75rem;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 32px rgba(0,0,0,0.16);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: slideIn 240ms ease-out;
}

.modal-corner__panel span {
  font-size: 12px;
  color: #111827;
  font-weight: 500;
}

.modal-corner__panel button {
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  border: none;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 11px;
  cursor: pointer;
  transition: background 150ms ease;
}

.modal-corner__panel button:hover {
  background: #c7d2fe;
}

@keyframes slideIn {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@media (prefers-color-scheme: dark) {
  .modal-corner__panel {
    background: #020617;
  }
  .modal-corner__panel span {
    color: #e5e7eb;
  }
  .modal-corner__panel button {
    background: #1e1b4b;
    color: #e0e7ff;
  }
}

.modal-corner {
  width: 200px;
  display: flex;
  justify-content: flex-end;
}

.modal-corner__panel {
  padding: 0.6rem 0.75rem;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 32px rgba(0,0,0,0.16);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: slideIn 240ms ease-out;
}

.modal-corner__panel span {
  font-size: 12px;
  color: #111827;
  font-weight: 500;
}

.modal-corner__panel button {
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  border: none;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 11px;
  cursor: pointer;
  transition: background 150ms ease;
}

.modal-corner__panel button:hover {
  background: #c7d2fe;
}

@keyframes slideIn {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@media (prefers-color-scheme: dark) {
  .modal-corner__panel {
    background: #020617;
  }
  .modal-corner__panel span {
    color: #e5e7eb;
  }
  .modal-corner__panel button {
    background: #1e1b4b;
    color: #e0e7ff;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Anchors to a screen corner for minimal intrusion
• Supports compact, micro-content layouts
• Preserves interaction with the main interface
• Designed for subtle, persistent UI elements

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.