Skip to main content
dubinity

Design & Accessibility

Spacing Scale Generator

Generate a spacing scale on a 4px or 8px grid, linear or geometric, with names and exports for CSS, tokens and Tailwind.

  • Runs in your browser
  • Works on mobile
  • In: Base unit
  • Out: CSS, JSON, Tailwind config
Loading the tool…

Your files and text are processed on your own device, inside this page. Nothing is uploaded to Dubinity or stored, and closing the tab discards it. How privacy works

About Spacing Scale Generator

Choose a base unit and how the scale grows: Tailwind-style multiples of the base, plain linear steps, or a geometric ratio. Name the steps by multiplier, number or t-shirt size, see each one as a bar, and export CSS custom properties, DTCG design-token JSON or Tailwind configuration.

Geometric steps can be rounded to whole pixels so they stay crisp on screen.

How to use it

  1. 1Set the base unit, for example 4px or 8px.
  2. 2Choose multiples, linear or geometric steps and how many.
  3. 3Pick a naming style.
  4. 4Copy or download the output you need.

Questions

Was this tool helpful?

Related tools

All design tools

  • Type Scale Generator

    Build a modular type scale from a base size and ratio, preview every step and export CSS, design tokens or Tailwind config.

    Base size · RATIO
    Runs in your browserOpen tool

  • Design Token Generator

    Build a small design-token set - colours, type scale, spacing, radii and shadows - and export CSS variables, DTCG JSON or Tailwind.

    HEX · RGB · HSL
    Runs in your browserOpen tool

  • PX to REM Converter

    Convert pixels to rem and rem to pixels for CSS, from any root font size, with points and percent alongside.

    Pixels · REM · Root size
    Runs in your browserOpen tool

  • Color Converter

    Convert a colour between HEX, RGB, HSL, HSV, HWB, CMYK and OKLCH, with contrast against black and white.

    TEXT
    Runs in your browserOpen tool

  • Lorem Ipsum Generator

    Generate placeholder paragraphs, sentences or words, in classic Latin or in Arabic filler text.

    NONE
    Runs in your browserOpen tool

  • Color Palette Generator

    Generate colour palettes from a base colour and a harmony, or at random with locks, then export CSS, tokens, Tailwind or a PNG.

    HEX · RGB · HSL
    Runs in your browserOpen tool