What is it?
An aspect ratio describes the proportional relationship between width and height. It is expressed as two numbers separated by a colon (e.g. 16:9 means for every 16 units of width there are 9 units of height).
Use W × H → Ratio to find the ratio of any dimension pair. Use Reverse to find a missing dimension given the other and a known ratio. Use Resize to scale dimensions while locking the aspect ratio — useful for CSS layouts, image exports, and video encoding.
Example
Width: 1920 Height: 1080
Aspect Ratio: 16:9 Decimal: 1.7778 Simplified: 1.78:1
Use the Reverse tab to find height from a known width and ratio (e.g. 1280 + 16:9 → 720).
Benefits
Build complex layouts without memorising syntax
Flexbox, grid, gradients, and box shadows are generated interactively — tweak parameters and see the result live, then copy the CSS directly into your stylesheet.
Prototype and iterate designs in seconds
Visual generators let you experiment with layout, shadows, gradients, and spacing without switching between editor and browser on every change.
Accessible color choices, verified before shipping
Color Contrast Checker confirms text and background combinations meet WCAG 2.1 AA and AAA requirements — catch contrast failures before users or auditors do.
Responsive values that scale correctly
CSS Clamp Calculator and Unit Converter produce fluid, viewport-relative values that work across screen sizes without manual arithmetic or magic numbers.
Frequently asked questions
What is an aspect ratio?
An aspect ratio is the proportional relationship between a rectangle's width and height, expressed as W:H. 16:9 means for every 16 units wide the rectangle is 9 units tall.
How does the reverse calculation work?
Enter a known width (or height) and a target ratio. The tool multiplies the known dimension by the ratio to find the missing one. For example, 1280 width × 16:9 → height = 1280 × 9 / 16 = 720.
What are the most common aspect ratios?
16:9 is used for HD/4K video and most monitors. 4:3 is for older displays and iPads. 1:1 is for social media square posts. 9:16 is for mobile-first vertical video (Reels, TikTok, Stories). 3:2 is the standard for full-frame DSLR photography.
How is the ratio simplified?
The tool divides both dimensions by their Greatest Common Divisor (GCD). For example 1920 and 1080 share a GCD of 120, giving 16:9.
Can I use decimal ratios like 2.35:1?
In the Reverse tab, the ratio field accepts decimal values (e.g. 2.35:1 for CinemaScope). The resize tab reads from the original dimensions directly, so decimals are handled automatically.