Z-Index Scale Planner
Generate a named, evenly spaced z-index system for your UI layers — dropdowns to tooltips — as copy-ready CSS variables.
End the z-index arms race
Every codebase eventually grows a z-index: 9999 — and then a 99999 to beat it. Those
magic numbers are a symptom of having no plan for how UI layers stack. This planner replaces them with a small,
semantic system: each overlay type gets a named value in a sensible stacking order, spaced far enough apart that you
can slot a new layer between two existing ones without renumbering everything.
Adjust the starting value and the gap, and the tool lays out the full ladder — dropdown, sticky header, banner,
overlay, modal, popover, toast, tooltip — then outputs it as CSS custom properties. Reference them with
z-index: var(--z-modal) so there's one source of truth and stacking becomes something you reason about
instead of fight.
Copy-ready CSS
Generated live in your browser — nothing is uploaded.
Frequently Asked Questions
Why plan z-index values?
Ad-hoc z-index values (99, 999, 9999) lead to stacking wars where nobody knows what sits above what. A named scale assigns each UI layer a clear, spaced value so overlaps are predictable.
What layers does this scale include?
Common semantic layers in stacking order: dropdown, sticky header, fixed banner, overlay/backdrop, modal, popover, toast, and tooltip — each spaced apart so you can insert new layers between them.
How do I use the output?
The output is CSS custom properties like --z-modal. Reference them with z-index: var(--z-modal); so every component pulls from one source of truth.
Is this tool free and private?
Yes. The scale is generated in your browser — no sign-up and nothing uploaded.
Want a full, conflict-free design system? Let’s build it.