Golden Ratio & Grid Calculator
One known dimension in, its golden-ratio pair out, with a live preview.
This value is the...
Larger
Smaller
Smaller dimension
100
Larger dimension
161.8034
Pair: 100 : 161.8034 (ratio ≈ 1 : 1.618)
The golden ratio (φ ≈ 1.618) is a common convention in layout grids, typography scales, and cropping — not a hard rule of aesthetics. Use it as a starting point, not a requirement.
What is this tool?
The golden ratio, φ ≈ 1.6180339887, describes a proportion where the larger part divided by the smaller equals the whole divided by the larger. Enter one dimension and mark whether it's the smaller or larger side to derive the other, with a live two-region preview so the proportion is visually legible. It's a common convention in layout grids, typography scales, and cropping — not a hard rule of aesthetics.
How to use it
- Enter a known dimension.
- Mark whether it's the smaller or larger side of the pair.
- Read the derived dimension and preview the proportion.
Related design tools
- Color ConverterConvert between HEX, RGB, HSL, and HSB/HSV with a live swatch.
- CSS Gradient GeneratorBuild linear or radial gradients with multiple stops and copy CSS.
- CSS Box Shadow GeneratorTune offset, blur, spread, color, and layered shadows visually.
- CSS Border Radius GeneratorControl each corner’s radius and copy the CSS.