Z-Index Manager
Tame z-index chaos. Build a named, ordered layer system on a consistent numeric scale, catch conflicts (duplicate values, out-of-order layers, runaway 9999s) automatically, see the stack visualized, and export to CSS variables, SCSS, JS/TS, Tailwind, or JSON.
About this ToolHow it works, benefits & use casesTap to collapse
z-index chaos is a rite of passage: one file sets a dropdown to 9999, the next bumps a modal to 99999, and soon nobody knows what stacks on top of what. This manager replaces the arms race with a real system. You build a set of named, ordered layers - base, dropdown, sticky, fixed, overlay, modal, popover, toast, tooltip - and the tool spaces their values along one consistent numeric scale (tens, hundreds, or a custom step). Reorder a layer and every value re-spaces itself, so you reason about stacking order rather than memorizing magic numbers. A live visual diagram draws the layers as offset, overlapping cards with the highest z in front, and a conflict checker flags the classic footguns: duplicate values that fall back to DOM order, layers whose numbers contradict their position, runaway values that restart the arms race, and gaps too tight to insert a new layer into. Export the finished scale as CSS custom properties, an SCSS map with a z() helper, a JavaScript or TypeScript const object, a Tailwind theme extension, or JSON - then copy, download, share via URL, or pipe it onward.
How to Use
- 1Pick a Scale - Tens, Hundreds, or Custom - to set how far apart layer values sit.
- 2Edit the layer list: rename layers, set explicit values, and use the up/down arrows to reorder them.
- 3Watch the visual stack and the conflict card update live; reordering re-spaces values automatically.
- 4Resolve any flagged conflicts (duplicates, out-of-order layers, oversized values, tight gaps).
- 5Choose an output format and copy, download, share, or pipe the generated z-index system.
Key Benefits
- A named, ordered layer system instead of scattered magic numbers
- Auto re-spacing along tens, hundreds, or a custom step when you reorder
- Live visual stacking diagram with conflicts highlighted in red
- Conflict detection: duplicate values, out-of-order layers, runaway numbers, tight gaps
- Exports to CSS variables, SCSS map with a z() function, JS, TS const, Tailwind, or JSON
- Shareable URL state plus copy, download, and pipe-to-another-tool support
Common Use Cases
- Establishing a single source of truth for z-index across a design system
- Replacing ad-hoc 9999 values with named, documented layer tokens
- Generating a Tailwind zIndex theme extension that matches your component layers
- Producing a TypeScript const so code references zIndex.modal instead of 1050
- Auditing an existing stack for duplicate or out-of-order z-index values
Conflicts
No conflicts. Values are unique, ordered, and on a sensible scale.
Scale
Reordering layers re-spaces values along the scale automatically. Editing a value by hand keeps it as-is (and may surface a conflict).
Layers
Layers are listed lowest (back) to highest (front). The visual stack mirrors this order.
Copy, download, share, or pipe to another tool
:root {
--z-base: 0; /* Default page content */
--z-dropdown: 100; /* Dropdown / select menus */
--z-sticky: 200; /* Sticky headers and bars */
--z-fixed: 300; /* Fixed-position elements */
--z-overlay: 400; /* Backdrop behind modals */
--z-modal: 500; /* Modal dialogs */
--z-popover: 600; /* Popovers and menus over modals */
--z-toast: 700; /* Toast notifications */
--z-tooltip: 800; /* Tooltips (always on top) */
}A system, not magic numbers
z-index chaos happens when every overlay reaches for a bigger number than the last. This tool gives you a small set of named, ordered layers spaced along one consistent scale. Reorder them and the values re-space themselves — you reason about order, not arbitrary integers.
Conflict detection built in
The tool flags duplicate values that tie and fall back to DOM order, layers whose values contradict their stacking position, runaway values that start an arms race, and gaps too tight to slot a new layer into. Export the clean result as CSS variables, an SCSS map with a z() helper, JS/TS constants, a Tailwind theme extension, or JSON.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- Tailwind Config GeneratorVisually build a Tailwind config - theme extend, colors, spacing, fonts, screens, plugins - and export it as a v3 JS config or a v4 @theme CSS block
- CSS Variables GeneratorDesign CSS custom properties as typed tokens with light & dark values, scale generators, and a live preview — export :root CSS, SCSS, Tailwind v4 @theme, or a JS token map
- Spacing Scale CalculatorLinear, geometric, Fibonacci or modular spacing scales with a visual ruler preview and utility classes — export CSS, Tailwind v4, SCSS, JSON
- Skeleton Screen GeneratorBuild layout-matched skeleton loaders (card/list/article/table) with shimmer/pulse/wave and a live preview
- Transition & Easing StudioDrag a cubic-bezier curve, play it on a live demo, and export CSS, @keyframes, Tailwind, Framer, or WAAPI
- Container Queries GeneratorDesign CSS @container queries with a live, resizable preview — export CSS, SCSS, and Tailwind v3 + v4
Layers are stored lowest-to-highest. When you move one up or down, the tool re-runs the scale: the lowest layer gets the base value, the next gets base plus the step, and so on. So after any reorder the values are always evenly spaced and in the right order, with no manual renumbering.
Four kinds. Duplicate values, where two layers tie and stacking falls back to DOM order. Out-of-order layers, where a layer that should sit behind has a higher z-index than one in front. Suspiciously large values (1000 or more), which signal a budding arms race. And gaps too tight to slot a future layer between two adjacent ones.