What is Golden Ratio Calculator?

Golden Ratio Calculator helps you compare width and height balance with presets such as the golden ratio and silver ratio. Enter either the width or the height, and the other side is calculated automatically while a live preview shows how the rectangle feels. It works well when you are choosing proportions for cards, banners, covers, thumbnails, or general image sizes.

How to Use Golden Ratio Calculator

Choose a ratio preset

Start by selecting a preset such as Golden Ratio, Silver Ratio, Platinum Ratio, Double Square, or Square. Each preset includes a small thumbnail, so you can compare the feel of each shape visually instead of relying on decimal values alone.

Set the orientation and edit either width or height

Next, choose whether you want a landscape or portrait shape. Then edit either the width or the height, and the other side is updated automatically to match the selected ratio. Width-first input feels natural for banners and hero images, while height-first input is often easier for covers, posters, and other portrait layouts.

Below the inputs, there are also quick size buttons for 320, 480, 720, 1000, and 1440, which makes it easy to test common dimensions. The result area shows the width, height, and a CSS-friendly aspect-ratio value.

Golden Ratio / Landscape / Width 1000
→ Width 1000, Height 618

Main Features

Ratio preset thumbnails

The golden ratio and silver ratio can feel close when you only look at their decimal values. Seeing them side by side as thumbnail shapes makes the difference easier to notice and helps you narrow down options faster.

Live width and height preview

The preview rectangle resizes to match the selected ratio. You can switch between landscape and portrait to compare how wide or tall each preset feels before using it in a design. The preview is meant for proportion checking, not for reproducing the exact pixel size on screen.

Dimension calculation and CSS ratio output

The result section shows width, height, and a CSS aspect-ratio string. It also shows the calculation formula, which makes it easier to confirm which side is acting as the base value.

Use Cases

• Comparing card or banner proportions before deciding on a layout
• Checking whether the golden ratio or silver ratio fits a design better
• Reviewing how portrait and landscape versions change the impression of a poster, cover, or thumbnail
• Picking a practical aspect-ratio value for CSS

Tips

• The tool is geared toward integer-based sizing, which makes it comfortable for rough layout planning and common image dimensions
• The same preset can look very different in landscape and portrait, so it is worth comparing both orientations
• The preview is for visual comparison, so use the result values and aspect-ratio output as the source of truth when implementing the size
• If you already know the exact width and height of an image or video, a general aspect ratio calculator may be a better fit for that task