SpacerScale — Visual CSS Spacing Scale Builder

Scale Steps(7/24)

1

px

--space-

2

px

--space-

3

px

--space-

4

px

--space-

5

px

--space-

6

px

--space-

7

px

--space-

Configuration

Root Font Size16px

Parent Width (for %)800px

Viewport Width (for vw)1440px

Output Unit

Decimal Places: 4

Saved Scales(0)

No saved scales yet. Click "Save Current" to store your scale for later.

Visual Ruler

1

4px0.25rem

2

8px0.5rem

3

16px1rem

4

24px1.5rem

5

32px2rem

6

48px3rem

7

64px4rem

Unit Converter

px16

rem1

em1

%2

vw1.1111

Component Playground

Card

Card Title

Content uses the scale for padding and gap.

Button Group

Form

Name

Email

Nav Bar

Logo

HomeAboutSettings

Token Output

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
}