Golden Ratio Calculator
Calculate proportional values using the golden ratio (1.618).
Perfect for typography scales, spacing systems, and layout proportions.
Golden Ratio Visualization
| Ratio | Calculation | Value |
|---|---|---|
| Base x PHI^3 | 16 x 1.618^3 | |
| Base x PHI^2 | 16 x 1.618^2 | |
| Base x PHI | 16 x 1.618 | |
| Base Value | 16 x 1 | |
| Base / PHI | 16 / 1.618 | |
| Base / PHI^2 | 16 / 1.618^2 | |
| Base / PHI^3 | 16 / 1.618^3 |
Common Use Cases for the Golden Ratio
Typography Scale
Create harmonious font size progressions. Start with a base font size (e.g., 16px) and multiply/divide by 1.618 for headings and small text.
Spacing System
Design consistent padding and margins. Use golden ratio multiples for spacing tokens that feel naturally balanced.
Layout Proportions
Split layouts into golden ratio sections. A sidebar and main content area can use 38% / 62% (1 / 1.618) proportions.
What is the Golden Ratio?
The golden ratio (PHI) is approximately 1.618033... It appears throughout nature, art, and architecture. Two quantities are in the golden ratio if their ratio equals the ratio of their sum to the larger quantity.
Why Use It in Design?
Golden ratio proportions are perceived as aesthetically pleasing and naturally balanced. Using it creates visual harmony in typography scales, spacing systems, and layout dimensions.
Explore more CSS tools
CSS Grid Generator
Create grid layouts visually
CSS Flexbox Generator
Create flex layouts visually
CSS Gradient Generator
Create custom gradients
CSS Text Gradient
Gradient text effects
CSS Gradients Collection
275+ ready-to-use gradients
CSS Box Shadow Generator
Design multi-layer shadows
CSS Selection Generator
Style text highlight colors
CSS Scrollbar Generator
Style custom scrollbars
CSS Blend Mode Generator
Mix colors with blend modes
CSS Cursor Generator
Preview all cursor styles
CSS Loader Generator
Create loading animations
CSS Button Generator
Design buttons with hover effects
CSS Glow Generator
Create neon glow effects
Fluid Typography
Scale text across screen sizes