How to use Spacing Scale Generator
- Choose linear or factor spacing.
- Set the base, factor, number of increments and root font size.
- Review the values and copy the CSS custom properties.
Example: Spacing Scale Generator
Double spacing at each step.
You add
Mode: factor. Base: 4 px. Factor: 2. Increments: 6. Root size: 16 px.
You get
The pixel values are 4, 8, 16, 32, 64, 128 and 256, named --space-1 through --space-7.
Supported inputs and limits
A bounded scale in pixels or rem, with an entered root size for conversion. Tokens do not create breakpoints or apply a layout automatically. Large values are clipped in the sample so they do not widen the page.
Where your input is processed
This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.
Name tokens for their role when useful
A numeric scale is easy to compare. In your stylesheet, a semantic alias such as a section gap can point to one scale value, so the role stays clear when the value changes.
Questions about Spacing Scale Generator
How does linear spacing differ from geometric spacing?
Linear spacing grows by a fixed increment. Geometric spacing multiplies by a fixed factor at each step.
Can I use these tokens for every margin?
Use them where they fit the content. A scale is a reference, not a reason to add space that the layout does not need.
Do rem tokens track the root font size?
Yes. The browser uses the page’s actual root font size; this tool uses your entered root size when converting.