This tool is part of these guided projects. Each project provides step-by-step instructions with checklists and all the tools you need in one place.
Tools you might need next
Generate CSS gradient code. Linear and radial. Copy-paste ready. With preview. Free design tool with instant browser-based results — no account, works on
Generate CSS box-shadow. Offset, blur, spread, color. Visual editor with preview. Free design tool with instant browser-based results — no account, works on
Generate border-radius. Per corner. Visual editor. For rounded corners. Free design tool with instant browser-based results — no account, works on desktop and
The aspect-ratio property sets a preferred aspect ratio for the box, which is used in auto-sizing calculations. It replaces the old padding-top percentage hack.
aspect-ratio: width / heightWhen both width and height are set explicitly, aspect-ratio is ignored. When only one dimension is set, the other is computed from the ratio. With neither set, the ratio constrains the natural size.
Updated: July 2026
Create a responsive video wrapper that maintains 16:9 ratio at any width.
→ aspect-ratio: 16 / 9
Force a profile image container to be perfectly square regardless of content.
→ aspect-ratio: 1 / 1
aspect-ratio only applies when at least one dimension is auto. If you set width: 300px and height: 200px, the ratio is ignored. Set only width and let height be computed.
The aspect-ratio property has 95%+ browser support. Use it directly instead of the padding-top: 56.25% workaround, which requires extra wrapper elements and absolute positioning.
Generate CSS aspect-ratio properties for responsive boxes and media. Lock width-height proportions for images, embeds, cards, and video containers. It applies the css aspect-ratio property (aspect-ratio: width / height). For example: 16:9 video container — Create a responsive video wrapper that maintains 16:9 ratio at any width.