Six common presets
16:9, 4:3, 1:1, 21:9, 9:16 and 3:2 cover video, photo, square and portrait use cases instantly.
CSS Aspect Ratio Generator
Pick a ratio preset or enter a custom width and height, watch the box resize live, and copy both the modern and classic fallback CSS.
16 / 9
Modern · aspect-ratio
Classic fallback · padding-top hackFor browsers without aspect-ratio support
Keep boxes proportioned, responsively
Lock any element to a ratio and watch it hold that shape at every screen size.
Any custom ratio
Type any width and height numbers to preview and generate CSS for a ratio that isn't in the preset list.
Modern and fallback CSS
Copy the one-line aspect-ratio rule, or the classic padding-top hack for older-browser support.
How to use the aspect ratio generator
- Pick a ratioChoose a preset or type a custom width and height.
- Resize the previewDrag the container width slider to see the box hold its shape.
- Copy the CSSGrab the modern aspect-ratio rule, or the classic fallback if you need it.
About CSS aspect-ratio
The CSS aspect-ratio property sets a preferred width-to-height ratio for a box, so once one dimension is known — usually the width, from the surrounding layout — the browser calculates the other automatically, with no JavaScript, no wrapper element and no image required. Written as aspect-ratio: 16 / 9, it means the box will try to stay 16 units wide for every 9 units tall as it resizes, which is exactly what you want for responsive video embeds, product photo grids and placeholder boxes that must not jump around as images finish loading. Before this property existed, developers relied on what's now called the padding-top percentage hack: because CSS always resolves percentage values for padding-top and padding-bottom against an element's own width, not its height, setting padding-top: 56.25% on an empty block forces its rendered height to be exactly 9/16 of its width, and the real content is then absolutely positioned inside to fill that reserved space. The hack still works everywhere and remains useful for supporting very old browsers, but it needs extra markup and positioning, whereas aspect-ratio is now supported in every current major browser and should be the default choice for new projects.
Width in, height out
aspect-ratio typically computes height from a known width, but it works in reverse too when height is constrained instead.
Content can still grow
If content inside the box is taller than the ratio allows, the box will grow unless you also set overflow or a fixed height.
Great for images
Set aspect-ratio directly on an img with object-fit: cover to prevent layout shift while it loads.
Fallback is still valid CSS
The padding-top hack isn't a hack in the negative sense — it's valid, well-supported CSS worth keeping for older targets.
CSS aspect ratio generator FAQ
What does the CSS aspect-ratio property do?
aspect-ratio sets a preferred width-to-height ratio for an element, so its height is calculated automatically from its width (or vice versa) without JavaScript.
Why would I need the padding-top percentage hack?
The padding-top hack works in browsers that predate the aspect-ratio property, using the fact that percentage padding is always calculated relative to an element's width, even for padding-top and padding-bottom.
Do I still need the fallback in modern projects?
aspect-ratio is supported in all current major browsers, so most new projects can use it alone; keep the fallback only if you must support very old browser versions.
Can I use a custom ratio instead of a preset?
Yes. Enter any width and height numbers in the custom fields and both the modern and fallback CSS update to match that exact ratio.
Is this aspect ratio generator free to use?
Yes. It's completely free, requires no signup, and the CSS is generated locally in your browser.
Try other CSS design tools
Keep building polished interfaces with these free online CSS generators.