Aspect Ratio Calculator

Calculate aspect ratios, find equivalent dimensions, and generate CSS snippets.

Dimensions

Width

Height

Common Aspect Ratios

Results

Simplified Ratio

16:9

Ratio Value

1.7778

Padding-Bottom %

56.25%

Format

16:9

CSS Snippets

aspect-ratio Property

aspect-ratio: 16 / 9;

Padding-Bottom Hack

.container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.container > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Tailwind Class

aspect-16/9

Visual Preview

1920 × 1080

What Aspect Ratio Is

Aspect ratio is the proportional relationship between width and height. It's expressed as two numbers separated by a colon (16:9, 4:3, 1:1).

In CSS, aspect ratio ensures elements maintain their proportions regardless of screen size. This is crucial for responsive images, videos, and containers that need to scale uniformly.

Common Aspect Ratios

16:9 (Widescreen)

Standard for videos, YouTube, modern displays. Most common ratio for web content.

4:3 (Standard)

Old TV format, iPad, some monitors. Still common for presentations and documents.

1:1 (Square)

Instagram posts, profile pictures, product thumbnails. Perfect for grid layouts.

21:9 (Ultrawide)

Cinematic format, ultrawide monitors. Great for immersive hero sections.

3:2 (Photo)

Classic photo format, Micro Four Thirds cameras. Common in photography portfolios.

9:16 (Vertical)

Stories format (Instagram, TikTok, Snapchat). Mobile-first vertical content.

CSS Aspect Ratio

Modern CSS has a dedicated aspect-ratio property:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

The old padding hack (using padding-top percentage) still works if you need older browser support, but the native property is cleaner and easier to maintain.

Other Free Tools

Search tools

CSS calc() Builder

Build complex CSS calc() expressions visually. Create responsive calculations for widths, heights, margins, and more. Free online CSS calc builder.

PX to REM Converter

Convert pixels to REM and EM units with configurable root font size. Generate accessible, scalable CSS. Free online px to rem converter.

Fluid Space Calculator

Generate clamp()-based responsive spacing that scales with viewport. Create fluid design systems. Free online fluid space calculator.

Fluid Typography Calculator

Create responsive font sizes using CSS clamp() for smooth scaling between breakpoints. Free online fluid typography generator.

Viewport Unit Converter

Convert between vw, vh, vmin, vmax, and px units. Generate responsive viewport-based CSS. Free online viewport unit converter.

CSS Grid Generator

Create CSS Grid layouts visually. Generate grid-template-areas, gap, and responsive breakpoints. Free online CSS Grid layout builder.

Flexbox Playground

Experiment with Flexbox properties interactively. Generate flex container and item CSS with live preview. Free online Flexbox learning tool.

Media Query Builder

Generate responsive CSS media queries visually. Pick breakpoints for mobile, tablet, and desktop. Free online media query generator.

CSS Border Radius Generator

Create asymmetric border-radius values with live preview. Generate organic, smooth corner shapes for modern UI design. Free online border radius tool.

CSS Box Shadow Generator

Create multi-layer box shadows with blur, spread, and inset options. Generate beautiful shadows for buttons, cards, and UI elements. Free online CSS shadow tool.

CSS Clip Path Maker

Draw custom clip-path shapes — polygons, circles, ellipses — with visual editor. Generate CSS clip-path code instantly. Free online clip path generator.

CSS Shape Generator

Create triangles, arrows, speech bubbles, and more using pure CSS. Generate shape code instantly. Free online CSS shape maker.

CSS Spacing Scale Generator

Generate consistent spacing and size scales for design tokens. Create 4px, 8px, 16px base scales. Free online spacing scale generator.

CSS Specificity Calculator

Calculate CSS selector specificity scores instantly. Understand cascade priority and debug style conflicts. Free online specificity calculator.

CSS Minifier & Beautifier

Minify CSS to reduce file size or beautify/format compressed CSS. Free online CSS minifier and prettifier for web developers.

CSS Variable Extractor

Extract custom properties (CSS variables) from existing CSS code. Auto-generate :root declarations. Free online CSS variable extractor.

CSS Filter Generator

Apply blur, brightness, contrast, hue-rotate, and more filters visually. Generate CSS filter code instantly. Free online CSS filter generator.

CSS Gradient Generator

Create linear, radial, and conic gradients with live preview. Generate CSS gradient code for backgrounds and UI. Free online gradient maker.

CSS Mesh Gradient Generator

Create stunning multi-point mesh gradients with smooth color transitions. Generate CSS and SVG mesh gradients. Free online mesh gradient tool.

CSS Pattern Generator

Generate repeating patterns — stripes, dots, checkerboard, waves — using CSS and SVG. Free online CSS pattern generator for backgrounds.

CSS Button Generator

Design beautiful buttons with hover effects, gradients, and shadows. Generate production-ready CSS button styles. Free online CSS button maker.

CSS Loader Generator

Create pure CSS loading spinners, dots, and bars. Customize size, color, and animation speed. Free online CSS loader generator.

Glassmorphism Generator

Create glassmorphism effects with backdrop-filter, blur, and transparency. Generate modern frosted glass CSS. Free online glassmorphism generator.

Neumorphism Generator

Create soft UI neumorphic effects with subtle shadows and highlights. Generate modern soft design CSS. Free online neumorphism generator.