Generates a spacing scale for design systems — a set of consistent spacing values for margins, padding, and gaps. Choose a base unit (4px, 8px) and a scaling method (linear, geometric, or T-shirt sizes). Outputs as CSS custom properties (--spacing-1: 4px), Tailwind CSS extend.spacing config, or JSON design tokens.
Configure your base unit and scale method to generate a complete spacing system for your project. Pair with the Type Scale Generator for a complete design token foundation.
8px base
Input
Base: 8px, 12 steps
Output
--space-1: 8px; --space-2: 16px; --space-3: 24px;...
Generate a harmonious typographic scale with CSS variables.
Generate CSS border-radius values visually.
Generate linear, radial, and conic CSS gradients with live preview.
Generate harmonious colour palettes from a base colour.
Create CSS box shadows with live preview and code output.
Generate CSS text-shadow effects with live preview.
:root {
--spacing-1: 4px;
--spacing-2: 8px;
--spacing-3: 12px;
--spacing-4: 16px;
--spacing-5: 20px;
--spacing-6: 24px;
--spacing-7: 28px;
--spacing-8: 32px;
--spacing-9: 36px;
--spacing-10: 40px;
--spacing-11: 44px;
--spacing-12: 48px;
}