CSS Unit Converter

Paste a CSS value (16px, 1.25rem, 50%, 5vw, 12pt) and see it converted into every other unit. Root font size, viewport, and container size are editable. Bulk mode for one-per-line inputs. Pure client-side; nothing is uploaded.

Context

Viewport:
Try:

Result

— = — px
Type a value to see conversions.
CSS unit reference — what each unit really means
UnitRelative toCommon use
px— (absolute)Hard pixel size. CSS px ≈ 1/96 in.
remRoot font sizeTypography, spacing. Respects user prefs.
emElement font sizeCompounds with parent sizes.
%Parent length or font sizeFlexible layouts.
vw/vhViewport width / heightFull-bleed, large type.
vmin/vmaxMin/max of vw, vhOrientation-agnostic.
sv/lv/dv*Small / large / dynamic viewportMobile-chrome-aware.
cq*Container query sizeComponent-level fluid layout.
pt/pc1in = 72pt = 6pcPrint stylesheets.
in/cm/mm/q1in = 2.54cm = 25.4mm = 101.6qPrint stylesheets.
ex/chElement x-height / "0" advanceType-fit containers.

The CSS pixel is defined as exactly 1/96 of a CSS inch: 1in = 96px, 1pt = 96/72 ≈ 1.333px. rem / em / ex / ch are approximate because they depend on the actual font's metrics; this tool assumes 1em = whatever root font size you set and 1ex ≈ 1ch ≈ 0.5em, which matches most fonts within a couple of percent.