Loading…

How to use CSS Aspect Ratio Generator

Enter your ratio (like 16:9), and the tool gives you the modern aspect-ratio CSS plus the padding-hack fallback for older browsers.

Frequently asked questions

How is the padding-hack percentage calculated?

Divide height by width and multiply by 100; a 16:9 ratio becomes 56.25% top padding.

Should I use aspect-ratio or the padding hack?

Use the aspect-ratio property in modern browsers; the padding hack is a fallback for very old browsers.

Does aspect-ratio work on any element?

Yes, aspect-ratio applies to most elements when a width or height is otherwise unconstrained.

More CSS Generators

CSS Multi-Column Generator
Build newspaper-style column-count layouts with column rules
CSS Object Fit Generator
Preview object-fit and object-position on images live
CSS Line Clamp Generator
Truncate multi-line text with -webkit-line-clamp ellipsis
CSS Writing Mode Generator
Set vertical and horizontal writing-mode with text-orientation
CSS Image Rendering Generator
Control pixelated vs smooth image-rendering with live preview
CSS Type Scale Generator
Generate a modular type scale as CSS custom properties
CSS Hex to RGBA Converter
Convert hex colors to rgba() with an adjustable alpha channel
CSS Gradient Generator
Build linear, radial and conic gradients with live preview
CSS Box Shadow Generator
Create layered box shadows with full control and preview
CSS Text Shadow Generator
Generate text shadow effects with live typography preview
CSS Border Radius Generator
Fine-tune all four corners individually with live preview
CSS Flexbox Generator
Visual flexbox layout builder with all properties

← View all CSS GeneratorsBrowse all 1,100+ tools →