Skip to content

Tools — 13

Naming a layer is harder than numbering it. That is the point.

z-index: 9999 is not a decision, it is a surrender. A named, spaced scale makes the stacking order readable in a token file and reviewable in a diff. This tool lets you define the layers, spaces them automatically, and writes the result into the shared token schema.

Layers

100
  • 0
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600

Stacking preview

Base content0
Dropdown100
Sticky header200
Overlay300
Modal400
Toast500
Tooltip600

Export

Export format

CSS custom properties
:root {
  --z-base: 0; /* Base content */
  --z-dropdown: 100; /* Dropdown */
  --z-sticky: 200; /* Sticky header */
  --z-overlay: 300; /* Overlay */
  --z-modal: 400; /* Modal */
  --z-toast: 500; /* Toast */
  --z-tooltip: 600; /* Tooltip */
}

Reference

A z-index scale is a set of named values spaced at regular intervals — typically 100 — so new layers can be inserted between existing ones without renumbering. Named tokens replace arbitrary z-index: 9999 declarations with reviewable, documented decisions.

Why should z-index values be spaced rather than sequential?

Spacing at intervals of 100 leaves room to insert a new layer between any two existing ones without changing the values that are already in production. Sequential values (1, 2, 3) force a renumber the moment anything is added in the middle.

The interval itself does not matter — 10, 50 or 100 all work — but 100 is the convention because it leaves 99 insertion slots per gap, which is more than any project will need.

What layers should a z-index scale include?

A practical set covers base content (0), dropdowns (100), sticky navigation (200), overlays (300), modals (400), toasts (500) and tooltips (600). Most products never need more than seven.

The order matters more than the count. A tooltip must sit above a modal, and a modal above its overlay, and getting that wrong is the specific bug that named tokens prevent.

How does this tool save z-index tokens?

Each layer is saved as a named token in the shared schema under the zIndex category. The key is the slug (e.g. "modal"), the value is the number, and the label is the human-readable name. These tokens export as CSS custom properties or Tailwind config.

Common questions

What is the highest z-index a browser supports?
The maximum is 2147483647, which is the largest 32-bit signed integer. In practice, any value above a few thousand is a sign that the scale has lost control.
Do z-index tokens work with CSS custom properties?
Yes. z-index accepts any integer, including one resolved from a custom property via var(--z-modal). This is the format this tool exports.
Can I use negative z-index values?
Yes. A negative z-index places an element behind its stacking context, which is useful for decorative pseudo-elements that should sit behind content. This tool supports negative values.

Sources