CSS Modular Scale Generator
Calculate modular typography scales (Golden Ratio, Major Third).
HTML Link & Heading Extractor
About CSS Modular Scale Generator
The CSS Modular Scale & Proportional Ratio Calculator generates geometric scaling series for typography, spacing, and UI component dimensions based on customizable mathematical base values and proportional ratios.
How to Use CSS Modular Scale Generator
Step 1
Enter your base pixel value and select a scale ratio.
Step 2
Set the number of positive and negative scale steps.
Step 3
Review the step values in pixels, rem, and em.
Step 4
Click "Copy Modular Scale".
Practical Use Cases for CSS Modular Scale Generator
Harmonizing Typography and Component Spacing
Derive both font sizes and margin/padding scales from a single unified modular ratio to establish cohesive visual rhythm across an entire design system.
Multi-Base Modular Scale Construction
Combine dual base values (e.g. 16px text base and 20px line-height base) to create rich, interleaved harmonic scale steps.
Input & Output Examples
Calculating Perfect Fifth (1.5) Modular Scale
Base: `16px` | Ratio: `1.5` | Steps: 5
Step 0: `16px` | Step 1: `24px` | Step 2: `36px` | Step 3: `54px` | Step 4: `81px` | Step 5: `121.5px`
Key Features & Performance
- ✓Supports Single-Base and Dual-Base modular ratio calculations.
- ✓Exports to CSS variables (`--ms-0`, `--ms-1`...), SCSS functions, or JavaScript token objects.
- ✓Visual ratio curve graph displaying step growth trajectory.
- ✓100% Client-Side memory execution.
- ✓1-Click Copy scale tokens.
Key Terminology & Definitions
Modular Scale
A sequence of proportions that relate to one another in a meaningful way, frequently used in architecture, typography, and interface design.
Dual-Base Scale
A modular scale derived from two distinct starting values, generating a denser set of proportional steps.