---
title: "Golden Ratio Calculator - Calculate dimensions and splits with golden and silver ratios | Web ToolBox"
description: "Choose a ratio such as the golden ratio or silver ratio, then enter a long side, short side, or total to calculate the remaining dimensions and the proportional split. The rectangle diagram and percentages help you plan layouts and image sizes."
canonical_url: "https://web-toolbox.dev/en/tools/golden-ratio-calculator"
meta:
  author: K
  "og:description": "Choose a ratio such as the golden ratio or silver ratio, then enter a long side, short side, or total to calculate the remaining dimensions and the proportional split. The rectangle diagram and percentages help you plan layouts and image sizes."
  "og:image": "https://web-toolbox.dev/og/en/tools/golden-ratio-calculator-9d0b207a.png"
  "og:image:alt": "Golden Ratio Calculator"
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "Golden Ratio Calculator - Calculate dimensions and splits with golden and silver ratios | Web ToolBox"
---

> Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt)

# **Golden Ratio Calculator**

Calculate dimensions and splits with golden and silver ratios

## **Size**

**Long side**

**Short side**

**Total**

Width + height

Edit any value to update the others while keeping the ratio

Long side**1000**61.8%

Short side**618**38.2%

## **Ratio**

**1.618 : 1**

Golden Ratio / Long side : short side / Landscape

<dl>

<dt>Width</dt>
<dd>**1000**</dd>

<dt>Height</dt>
<dd>**618**</dd>

<dt>Total</dt>
<dd>**1618**</dd>

</dl>

```
aspect-ratio: 1.618 / 1;
```

## What is Golden Ratio Calculator?

Golden Ratio Calculator lets you choose a proportion such as the golden ratio or silver ratio, then enter a long side, short side, or total to calculate the remaining dimensions and the proportional split. A rectangle diagram and the long-side and short-side percentages help you plan layouts and image sizes.

You can copy the ratio, dimensions, or CSS `**aspect-ratio**` value.

## How to Use

1. Choose a ratio.
2. Enter a long side, short side, or total. The other values are calculated automatically.
3. Use “Swap dimensions” to switch between landscape and portrait. The long-side and short-side values stay the same, while the width-height mapping and the diagram orientation flip.
4. Copy the ratio, dimensions, or CSS `**aspect-ratio**` value.

### Splitting a Total

The total is the width plus the height. Entering a total splits it into a long side and a short side using the selected ratio. With the golden ratio and a total of 1440, for example, the long side is about 890.2 and the short side is about 549.8.

### Rectangle Diagram

The diagram divides the selected rectangle into squares. With the golden ratio, each square leaves a smaller rectangle with the same proportion, so the spiral continues. Other ratios show how the rectangle is divided.

## Main Settings

### Swap Dimensions

Swaps the width and height to flip the orientation. The long-side and short-side values stay the same. The current orientation is shown in the results. The current orientation is kept while you edit values.

### Common Long Sides

Choosing a common long side updates the dimensions using that value as the long side.

## Use Cases

- Checking the balance of a card or banner before choosing its proportions
- Finding the other dimension after setting the long side of an image or canvas
- Splitting a header or section with the golden ratio
- Deciding on a CSS `**aspect-ratio**` value

## Things to Keep in Mind

- The long-side and short-side inputs always mean the longer and shorter sides, regardless of orientation. Check the results to see how they map to the width and height
- The long side is handled in the range 1 to 100000. If a short-side or total input would make the long side exceed that range, the values are adjusted so the long side stays at 100000
- The preview is for checking proportions, not for reproducing exact pixel sizes
- For an arbitrary aspect ratio, [**Aspect Ratio Calculator**](https://web-toolbox.dev/en/tools/aspect-ratio-calculator) is a better fit

**How was your experience?**

Last updated: October 21, 2026

### **Related Tools**

- [<h4>**Aspect Ratio Calculator**</h4>](https://web-toolbox.dev/en/tools/aspect-ratio-calculator)
- [<h4>**Nested Border-Radius Optimization**</h4>](https://web-toolbox.dev/en/tools/nested-border-radius-calculator)
- [<h4>**Percentage・PX Calculator**</h4>](https://web-toolbox.dev/en/tools/percentage-px-calculator)
- [<h4>**PX・Rem Calculator**</h4>](https://web-toolbox.dev/en/tools/px-rem-calculator)
- [<h4>**Business Day Calendar**</h4>](https://web-toolbox.dev/en/tools/business-calendar)
- [<h4>**Character Counter**</h4>](https://web-toolbox.dev/en/tools/character-counter)
- [<h4>**Color Contrast Checker**</h4>](https://web-toolbox.dev/en/tools/color-contrast-checker)
- [<h4>**Epoch Converter**</h4>](https://web-toolbox.dev/en/tools/epoch-converter)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/en#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"en-US","name":"Web ToolBox","url":"https://web-toolbox.dev/en","translationOfWork":{"@id":"https://web-toolbox.dev/#website"}},{"@id":"https://web-toolbox.dev/en/tools/golden-ratio-calculator#webpage","@type":"WebPage","description":"Choose a ratio such as the golden ratio or silver ratio, then enter a long side, short side, or total to calculate the remaining dimensions and the proportional split. The rectangle diagram and percentages help you plan layouts and image sizes.","name":"Golden Ratio Calculator - Calculate dimensions and splits with golden and silver ratios","url":"https://web-toolbox.dev/en/tools/golden-ratio-calculator","isPartOf":{"@id":"https://web-toolbox.dev/en#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/en/tools/golden-ratio-calculator"]}]},{"@id":"https://web-toolbox.dev/en/tools/golden-ratio-calculator#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"Choose a ratio such as the golden ratio or silver ratio, then enter a long side, short side, or total to calculate the remaining dimensions and the proportional split. The rectangle diagram and percentages help you plan layouts and image sizes.","name":"Golden Ratio Calculator - Calculate dimensions and splits with golden and silver ratios","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]}
```

## Sitemap

See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.