• Free forever
  • No sign-up
  • Instant results

Layout Archives

All Layout Calculators

Golden Ratio
Calculate φ counterpart of a value
▾
Result
—
Open full tool →
Aspect Ratio
Simplify ratio + get padding-top trick
▾
Simplified ratio
—
Open full tool →
CSS Grid Generator
grid-template-columns shorthand
▾
grid-template-columns
—
Open full tool →
Z-Index Scale
Sensible stacking layer reference
▾
Layer Value CSS var
Base 0
--z-base: 0
Raised 10
--z-raised: 10
Dropdown 100
--z-dropdown: 100
Sticky 200
--z-sticky: 200
Modal 400
--z-modal: 400
Toast 500
--z-toast: 500
Tooltip 600
--z-tooltip: 600
Open full tool →
nth-child Builder
Visual an+b expression builder
▾
CSS expression
—
Preview (highlighted = selected)
Open full tool →
Border Radius → %
px border-radius as % of element
▾
As percentage
—
Open full tool →