Z-Index Scale Generator

Define a consistent z-index scale (dropdown, modal, toast). Export CSS custom properties.

Base step (gap between layers)

Output

CSS

:root {
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-modal: 2000;
  --z-popover: 2100;
  --z-toast: 3000;
  --z-tooltip: 3100;
}

CSS

.dropdown {
  z-index: var(--z-dropdown);
}

Frequently Asked Questions

A fixed scale (e.g. 1000, 2000, 3000) avoids magic numbers and stacking bugs. CSS variables let you change one place and keep layers consistent.

Yes. No sign-up. All generation runs in your browser.

Was this helpful?

Build responsive values with clamp(min, preferred, max). Export CSS and Tailwind. Perfect for fluid typography and spacing.

Convert Tailwind utility classes to equivalent CSS. Debug and understand Tailwind output.

Visual layout builder for Flexbox and CSS Grid. Export CSS or Tailwind.