Spacing Scale
Build linear or geometric spacing scales from a base value and export CSS variables or Tailwind theme spacing.
Consistent spacing for design systems
Start from a base value such as 4px or 8px, choose a linear or geometric scale, and preview bar widths before copying CSS custom properties or a Tailwind theme.extend.spacing snippet.
Related front-end tools
Style scrollbars with the Scrollbar Styler or generate responsive layouts with the Responsive Breakpoint Tester.
Frequently Asked Questions
Should I use 4px or 8px as a base?
8px is common for marketing sites. 4px gives finer control for dense dashboards.
When should I pick geometric scaling?
Geometric scales grow faster and work well when you need a wide range from tight gaps to large section padding.
Can I paste the output into Tailwind config?
Yes. Switch export format to Tailwind and copy the snippet into theme.extend in your config file.
Related Tools
Hex Validator
Luminosity Calculator
HTML Decode String
Boost Horsepower Calculator
Gram Schmidt Calculator
Kansas Paycheck Calculator
Calculate Seconds Till Midnight
Katch McArdle BMR Calculator
Aquarium Glass Thickness Calculator
Cubic Cell Calculator
JSONC to JSON Converter
HKDF Key Derivation
Rhombus Calculator
Random Verb Generator
Moving Checklist Generator
Mach Number Calculator
Odd Numbers Generator
Image Aspect Fit Cover Calculator
ET Method Horsepower Calculator
FIB-4 Calculator