Skip to content

Spacing Scale Generator

Generate a spacing/sizing scale from a base unit. Copy as CSS custom properties, Tailwind config or SCSS variables.

Generated Tokens
 
 
 
       
 
  
How to use the Spacing Scale Generator
 
     
  1.   
    Choose a base unit and number of steps.
     
  2.   
    Preview the spacing visually.
     
  3.   
    Copy the output in your preferred format.
     
    4.  
  
What is a spacing scale?
 
A spacing scale defines a set of consistent spacing values (4px, 8px, 12px, 16px, 24px, 32px, etc.) used across padding, margins, and gaps in a design system. Using a scale — usually based on a 4px or 8px grid — makes layouts feel cohesive and removes guesswork. This generator creates the scale and outputs it in the format your stack uses.
  
Key features
 
     
  •   Generate from any base unit (4px, 8px, or custom) 
  •   Visual preview boxes at each spacing step 
  •   Copy as CSS, Tailwind spacing, or SCSS variables 
  •   Adjustable number of steps 
    •  
  
Frequently asked questions
 
 
  What base unit should I use?   
4px and 8px are the most common. 4px gives finer control; 8px is simpler and works well with common UI frameworks.
 
  Does this output pixel values only?   
You can choose px or rem output. The preview is shown proportionally regardless of unit.
 
  Is this saved anywhere?   
No — the generator runs entirely in your browser.
 
 
 
   
     
 
 
 
More tools
 Browse all → 
 
  
   
 
Typography Scale Calculator
 
Generate harmonious type scales
  
   
 
Favicon Generator
 
Image → favicon.ico + all sizes
  
   
 
Placeholder Image Generator
 
On-the-fly placeholder images
  
   
 
CSS Gradient Generator
 
Linear & radial gradients
  
   
 
Box Shadow Generator
 
Visual CSS box-shadow
  
   
 
Border Radius Generator
 
Visual border-radius & blobs