Free Tool

CSS Size Generator

Generate CSS width and height properties with multiple units, constraints, and responsive options. Perfect for quick CSS snippets.

Width

Height

Max Width

Min Width

Max Height

Min Height

Maintain aspect ratio Add object-fit (for images/videos)

.element {
  width: 1200px;
  height: 800px;
}

Common Size Presets

Support for px, %, em, rem, vw, vh, and auto units for maximum flexibility.

Modern aspect-ratio property support for responsive sizing without padding hacks.

Add min/max width and height constraints for better responsive control.

One-click copy of generated CSS code ready to paste into your stylesheet.

Quick access to commonly used size patterns like hero sections and cards.

Generate object-fit properties for images and videos with proper sizing.

% (percentage): Relative to parent element's size. Great for fluid layouts.
em: Relative to current element's font size. Compounds when nested.
rem: Relative to root (html) font size. More predictable than em.
vw (viewport width): 1vw = 1% of viewport width. Perfect for responsive designs.
vh (viewport height): 1vh = 1% of viewport height. Ideal for full-screen sections.

aspect-ratio: Maintains width-to-height ratio automatically. Replaces old padding-bottom hack.
object-fit: Controls how images/videos fit their container (cover, contain, fill, etc.).
max-width/min-width: Set boundaries for responsive sizing.