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%;
}

Related tools

CSS Gradient GeneratorCSS

Build beautiful CSS gradients visually with a live preview.

Box Shadow GeneratorCSS

Create CSS box-shadow values visually with multiple shadows and live preview.

Border Radius GeneratorCSS

Visual CSS border-radius editor with per-corner control.

Flexbox PlaygroundCSS

Interactive CSS flexbox layout builder with live preview.

CSS Grid GeneratorCSS

Visual CSS Grid layout generator with cell spanning.

CSS Animation GeneratorCSS

Build CSS @keyframes animations visually with live preview.

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.