CSS Z-Index Visualizer

Home/Tools/Z-Index Visualizer

Visualize and manage z-index stacking contexts.

No sign-up neededRuns in your browserProduction-ready CSS

Z-Index Layers

Stack Visualization

dropdownz:10
stickyz:20
modal-backdropz:30
modalz:40
popoverz:50
tooltipz:60

Layer Order (Top to Bottom)

tooltip60
popover50
modal40
modal-backdrop30
sticky20
dropdown10
Generated CSS
/* Z-Index Scale */
:root {
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-modal-backdrop: 30;
  --z-modal: 40;
  --z-popover: 50;
  --z-tooltip: 60;
}

/* Usage */
.dropdown { z-index: var(--z-dropdown); }
.modal { z-index: var(--z-modal); }
.tooltip { z-index: var(--z-tooltip); }