Web Tools tools.bryantsmith.com

CSS & Layout

Z-Index Planner

Name your UI layers, order them once, and get a consistent z-index scale to copy into your stylesheet. A live stack preview and clear warnings keep you out of z-index conflict hell — all in your browser.

Runs in your browser v1.0.0

Layers

Layers are listed bottom to top. Reorder with the arrow buttons — each layer's z-index is recalculated from the start value and step so the scale stays consistent.

Layer stack

top layer wins

Generated scale


                    

                        
                        
                        
                        
                    

                

            

        

    


    

        

            
How it works

        

        

            

                Every layer gets start + index × step, so the scale always ascends in
                even gaps and you can slot a new layer between existing ones later. The output uses a
                z prefix (--z-modal, $z-modal) and sanitises names
                into safe identifiers. Nothing is sent to a server; the optional share link encodes the
                plan in the URL fragment, which stays in the browser.
            

        

    




Related tools
  • Aspect Ratio CalculatorConvert width and height into a simplified aspect ratio, find a missing dimension from a ratio, and copy a CSS aspect-ratio value.
  • Backdrop Filter GeneratorCreate frosted-glass backdrop-filter and blur effects with a live preview and copyable CSS.
  • Border Radius GeneratorSet uniform or per-corner border radii with a live preview, then copy the CSS — entirely in your browser.
  • Box Shadow GeneratorVisually build single or layered CSS box shadows and copy production-ready CSS — entirely in your browser.
  • Breakpoint TesterPreview your HTML at multiple viewport widths side by side and catch horizontal overflow at each breakpoint.
  • CSS Animation BuilderCreate CSS @keyframes animations visually with a live preview, presets and copyable CSS.
More CSS & Layout tools