Z-Index Scale Planner
Generate a named z-index scale as CSS custom properties, audit existing values for collisions and arbitrary numbers, and identify where a new stacking context will trap an element.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Every codebase ends up with 9999
Without a plan, z-index values are chosen by trying a number and increasing it until the element appears. The result is a codebase containing 10, 100, 999, 9999 and eventually 2147483647, where nobody can add a new layer without checking every existing value, and where the numbers encode no information about what should sit above what. A named scale with deliberate gaps replaces guessing with a lookup, and the gaps mean a new layer can be inserted without renumbering anything.
Stacking contexts are why a high z-index sometimes does nothing
An element's z-index only competes with its siblings inside the same stacking context. If any ancestor creates one, the element is trapped inside it however large its own value. Transforms, filters, opacity below 1, will-change, position fixed and several other properties all create stacking contexts, frequently by accident: adding opacity 0.99 to a parent for a fade can trap a dropdown behind content that used to sit below it. This is the single most common cause of a z-index that appears not to work.
A scale needs fewer levels than people expect
Most interfaces need under ten distinct layers: base content, raised cards, sticky headers, dropdowns, overlays, modals, popovers, toasts and tooltips. Anything beyond that is usually two things fighting that should have been the same level, or an element that should have been moved in the document rather than raised above it. Keeping the list short is part of the value.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
Why does my z-index not work?
Almost always because an ancestor created a stacking context, which traps the element inside it however high its value. Transforms, filters, opacity below 1, will-change and position fixed all create one, frequently by accident.
What creates a stacking context?
Positioned elements with a z-index other than auto, any transform or filter, opacity below 1, will-change, isolation isolate, position fixed or sticky, and elements inside a flex or grid container that have a z-index.
How many layers should a scale have?
Usually fewer than ten. Base, raised, sticky, dropdown, overlay, modal, popover, toast and tooltip covers most interfaces. More than that generally means two things at the same conceptual level fighting each other.
Why leave gaps between the values?
So a new layer can be inserted between two existing ones without renumbering everything. Gaps of ten or a hundred cost nothing and are what makes the scale survive contact with a real project.
What about the maximum value?
2147483647 is the largest a 32-bit signed integer holds, and reaching for it is a sign the system has broken down rather than a solution. Anything already at that value cannot be beaten, only matched, and later elements win ties by document order.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
List your layers or paste existing z-index values to generate a sane scale.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.