CSS Aspect Ratio Generator
Generate CSS aspect-ratio property with common presets (16:9, 4:3, 1:1, 21:9). Includes padding-bottom fallback for older browsers and live preview.
How to Use CSS Aspect Ratio Generator
The CSS Aspect Ratio Generator creates CSS code for maintaining aspect ratios on elements. Choose from common presets (16:9 widescreen, 4:3 standard, 1:1 square, 21:9 ultrawide) or enter custom ratios. The tool generates both the modern aspect-ratio property and a padding-bottom fallback for older browsers. A live preview shows exactly how your element will look. Set a custom container width for precise control. Perfect for responsive video containers, image placeholders, and card layouts.
Step-by-Step Instructions
- Select a preset ratio or enter custom width and height values
- Optionally set a container width
- View the live preview of your aspect ratio
- Copy the generated CSS including the fallback code
Related Tools
JSON Formatter and Validator
Format, validate, and pretty-print JSON with syntax highlighting.
Base64 Encoder and Decoder
Encode text to Base64 or decode Base64 strings back to plain text.
URL Encoder and Decoder
Encode special characters for URLs or decode percent-encoded strings.
HTML Entity Encoder and Decoder
Encode special characters as HTML entities or decode them back.