Free Tools/Aspect Ratio Box

Aspect Ratio Box

Generate CSS for maintaining aspect ratios using the aspect-ratio property or padding-top hack.

Ratio

Width

Height

Preview width (px)

400 × 225px

Ratio

16:9

Decimal

1.7778

Padding %

56.25%

Modern CSS (aspect-ratio)

.element {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Legacy (padding-top hack)

.element-wrap {
  position: relative;
  padding-top: 56.25%;
}

.element-wrap > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

CSS Tools

CSS without the guesswork

Visual generators and calculators for gradients, shadows, grid, flexbox and more — each with a live preview and copy-ready CSS for the result.

Related CSS tools

📐

CSS Unit Converter

Convert between px, rem, em, pt, vw and vh with configurable base font size and viewport.

Use tool →🌈

CSS Gradient Generator

Build linear and radial CSS gradients visually with colour stops, angle control and a live preview.

Use tool →🔲

CSS Box Shadow Generator

Build multi-layer CSS box shadows visually with sliders for offset, blur, spread and colour.

Use tool →⌒

CSS Border Radius Generator

Build border-radius values visually with per-corner sliders, presets and a live preview.

Use tool →

Explore more from Dino Media: All Free Tools · Our Services · Digital Glossary · Our Work

See Our Work

Like our eye for detail?

We design and build pixel-perfect, high-performing websites for ambitious UK businesses. Take a look at what we have created.

See Our Portfolio →

Free Tools/Aspect Ratio Box

Aspect Ratio Box

Generate CSS for maintaining aspect ratios using the aspect-ratio property or padding-top hack.

Ratio

Width

Height

Preview width (px)

400 × 225px

Ratio

16:9

Decimal

1.7778

Padding %

56.25%

Modern CSS (aspect-ratio)

.element {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Legacy (padding-top hack)

.element-wrap {
  position: relative;
  padding-top: 56.25%;
}

.element-wrap > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

CSS Tools

CSS without the guesswork

Visual generators and calculators for gradients, shadows, grid, flexbox and more — each with a live preview and copy-ready CSS for the result.

Related CSS tools

📐

CSS Unit Converter

Convert between px, rem, em, pt, vw and vh with configurable base font size and viewport.

Use tool →🌈

CSS Gradient Generator

Build linear and radial CSS gradients visually with colour stops, angle control and a live preview.

Use tool →🔲

CSS Box Shadow Generator

Build multi-layer CSS box shadows visually with sliders for offset, blur, spread and colour.

Use tool →⌒

CSS Border Radius Generator

Build border-radius values visually with per-corner sliders, presets and a live preview.

Use tool →

Explore more from Dino Media: All Free Tools · Our Services · Digital Glossary · Our Work

See Our Work

Like our eye for detail?

We design and build pixel-perfect, high-performing websites for ambitious UK businesses. Take a look at what we have created.

See Our Portfolio →