What is the CSS Aspect Ratio Generator?
Generate aspect-ratio CSS for responsive media containers. Supports standard ratios and custom values, with fallback padding-top code for older browsers.
Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.
Using the CSS Aspect Ratio Generator
Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.
Select or enter your ratio
Pick from common ratios (16:9, 4:3, 1:1, 3:2) or enter custom width and height values.
Choose your output
Toggle between the modern aspect-ratio property and the legacy padding-top percentage fallback. The calculated percentage is shown automatically.
Copy the CSS
Click Copy to grab the output. The modern property is a one-liner. The legacy fallback includes the container and child position rules.
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
/* Modern browsers - Chrome 88+, Firefox 89+, Safari 15+ */
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
/* Fallback for older browsers using padding hack */
.video-container-legacy {
position: relative;
padding-top: 56.25%; /* 9/16 = 0.5625 */
width: 100%;
}
.video-container-legacy > * {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}The modern aspect-ratio property is simpler. Include the padding fallback only if you support Safari 14 or earlier.
Pro tips for better results
The modern aspect-ratio property is safe to use today
Chrome 88+, Firefox 89+, Safari 15+, and Edge 88+ support aspect-ratio. That covers more than 93% of current traffic. The padding-top fallback is only needed for very old Safari.
aspect-ratio on images prevents layout shift
Setting width: 100%; aspect-ratio: 16/9 on an img element reserves the correct space before the image loads, eliminating cumulative layout shift (CLS) - a Core Web Vitals metric.
The padding-top percentage formula
padding-top % = (height / width) x 100. For 16:9: (9/16) x 100 = 56.25%. For 4:3: (3/4) x 100 = 75%. For 1:1: 100%.
Frequently asked questions
From the blog
Read more →Modern CSS techniques every developer should know
A practical tour of the CSS features that replaced yesterday’s hacks.
From design to code without the friction
How visual generators speed up the build without sacrificing clean output.
Writing CSS that scales with your project
Tokens, naming, and structure that keep large stylesheets maintainable.