CSS Aspect Ratio Generator
Generate CSS using the aspect-ratio property to keep elements at a fixed ratio such as 16:9 for responsive images and videos.
Last reviewed by the Radiatus Cloud team
Generate CSS using the aspect-ratio property for responsive boxes.
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Lock element ratios with CSS
The CSS aspect-ratio property keeps an element at a fixed width-to-height ratio as it scales, which is invaluable for responsive design. This generator produces the CSS from a preset ratio such as sixteen by nine for video, four by three, square or ultrawide, or a custom ratio you enter. It also includes rules so that images, videos and iframes placed inside fill the box cleanly using object-fit.
Before this property, developers relied on a padding-based hack; the native property makes fixed ratios simple and reliable.
Responsive media without jumps
Fixing the aspect ratio prevents layout shift, where content jumps as an image or video loads, because the browser reserves the correct space in advance. This improves both the user experience and Core Web Vitals scores. It is ideal for embedded videos, image placeholders, cards and any element that should keep its shape across screen sizes.
The aspect-ratio property is supported in all modern browsers. Combine it with object-fit so media fills the reserved box without distortion. All generation happens locally in your browser.
Notes on the generated code
Because the css aspect ratio generator runs entirely in your browser, you can experiment with every option and watch the generated code update instantly, with nothing uploaded and no account required. The output is clean, standards-based CSS that works in any project without external libraries or a build step, so you can paste it straight into your stylesheet and refine it further by hand whenever you need to.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
What does the aspect-ratio property do?
It keeps an element at a fixed width-to-height ratio as it scales, so the box always maintains its shape responsively.
Why does fixing the ratio help performance?
Reserving the correct space in advance prevents layout shift as media loads, improving the experience and Core Web Vitals.
How do I make a video fill the box?
Apply object-fit cover to the media inside, which the generated CSS includes, so it fills the ratio box without distortion.
Can I use a custom ratio?
Yes. Choose the custom option and enter any width divided by height, such as 5/4, to lock the element to that ratio.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Choose a ratio preset or enter a custom ratio, then copy the CSS.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.