Dev Tools

CSS Aspect Ratio Box

Generate CSS for responsive aspect-ratio containers with the modern aspect-ratio property and padding-bottom fallback.

Preview
16:9
Padding-bottom: 56.2500%
Settings
Presets
Width Ratio16
Height Ratio9
Max Width600px
Background Color
Modern CSS (aspect-ratio)
.aspect-ratio-box {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16 / 9;
  background: #3b82f6;
}
Fallback CSS (padding-bottom)
.aspect-ratio-box {
  position: relative;
  width: 100%;
  max-width: 600px;
  padding-bottom: 56.2500%;
  background: #3b82f6;
}

.aspect-ratio-box > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
Was this page helpful?

Related tools

CSS Gradient GeneratorBox Shadow GeneratorBorder Radius GeneratorFlexbox PlaygroundCSS Grid GeneratorCSS Animation Generator

About CSS Aspect Ratio Box

Generate CSS for a responsive box that holds a fixed aspect ratio (like 16:9), so embedded videos and images never cause layout shift. Outputs modern aspect-ratio CSS with a padding-top fallback.

How to use

  1. Enter the width and height ratio (e.g. 16 and 9).
  2. Copy the generated CSS.
  3. Apply it to your container element.

Frequently asked questions

Why use an aspect-ratio box?
Reserving space for media prevents cumulative layout shift (CLS) as it loads, improving Core Web Vitals.
Is the modern aspect-ratio property enough?
It works in current browsers; the padding-top fallback covers older ones.