Visually manage CSS z-index values for your UI layers — add elements, set z-index values, see the stacking order live and export CSS variables or class definitions.
Click Add Layer and give each layer a name — Modal, Navbar, Tooltip, Dropdown. Set its z-index value using the number input.
The visual stack diagram updates in real time showing all layers ordered by z-index. Drag layers to reorder them.
Click Export CSS to get CSS custom properties, SCSS variables or a JS object. Copy or download the output for your project.
The CSS z-index property controls the stacking order of positioned elements. Management becomes difficult as projects grow: teams use arbitrary values like z-index: 9999, values conflict between components from different developers, and CSS stacking context rules mean high z-index values on child elements can be overridden by their parent stacking context. A defined scale prevents these conflicts.
A stacking context is an independent layer where z-index values are evaluated. A new stacking context is created by any element with position and z-index, opacity less than 1, transform, filter, perspective, clip-path, mask, will-change or isolation: isolate. Inside a stacking context z-index values only compete with siblings — a child cannot escape its parent stacking context even with z-index: 9999.
A well-structured scale: base content 0-10, sticky headers 100, dropdowns and tooltips 200-300, fixed navigation 400-500, modals and overlays 600-700, notifications and toasts 800-900, critical system overlays 1000+. The 100-point scale gives room between layers to insert new elements without renumbering everything.
The diagram renders each defined layer as a coloured rectangle stacked vertically in order of z-index value. Higher values appear higher in the visual stack. Each layer is labelled with its name and value. This immediately shows conflicting values (same visual position), gaps too small for future insertions, or ordering that does not match the intended UI hierarchy.
Yes — the CSS Custom Properties export generates a :root block with each layer as a CSS variable: :root { --z-modal: 600; --z-tooltip: 300; }. This is the recommended modern approach — components reference the variable (z-index: var(--z-modal)) rather than hardcoding values. Changes require editing only the :root definition.
Yes — three export formats: CSS Custom Properties (:root { --z-modal: 600; }), SCSS variables ($z-modal: 600;), and a JavaScript/TypeScript object (export const zIndex = { modal: 600 }). The JS/TS export is useful for applying z-index dynamically in React or Vue components.
When two positioned elements in the same stacking context have identical z-index values the element appearing later in the HTML source order is painted on top. Identical z-index values between different UI components usually indicate a missing layer in the scale. The manager flags duplicate values with a warning.
Yes — very high values like 9999, 99999 or 2147483647 are a code smell indicating a z-index war where each developer tries to ensure their component wins. The result is unmaintainable. Define a finite documented scale covering your actual UI layer needs (typically 5-10 distinct layers). Maximum z-index should be determined by layer hierarchy, not by outbidding other components.
Yes — paste your existing CSS into the Import field and the tool parses all z-index declarations, extracts selector names and values, and populates the layer editor automatically. Review the extracted layers, rename to meaningful labels, resolve duplicates and export a clean organised scale.
Your layers are saved in browser memory during the current session. Refreshing or closing the tab clears the configuration. Use the Export function to save your layer definitions as CSS, SCSS or JS before closing. For team use commit the exported token file to your project repository so all team members reference the same scale.
