CSS z-index generator
Generated CSS
A higher z-index does not always win - it only applies within the same stacking context, and opacity below 1, a transform and several other properties all create a new one. This renders the boxes exactly as a browser would, so the real stacking order is visible rather than predicted.
Why z-index is confusing to reason about in your head
A higher z-index does not always win. It only applies within the same stacking context, and a new stacking context is created by more than just position - opacity below 1, a CSS transform, will-change, and several other properties all quietly create one. A box with z-index 9999 can still render behind a box with z-index 1 if they are not in the same stacking context, which is the single most common reason "z-index isn't working" and the reason a live preview is worth more here than a formula.
What this does
Add any number of overlapping boxes, give each a z-index (and optionally a position and a stacking-context-creating property like opacity or transform, to demonstrate the trap above), and the preview renders them exactly as a browser would - so the actual stacking order is seen directly rather than predicted from the numbers alone.
Copy the CSS
Once the layers look right, the CSS for every box is generated and ready to copy into a stylesheet.
Related tools
See the CSS minifier once the real stylesheet is ready to ship.
.png)
