Advertisement

CSS unit converter

Convert between CSS units instantly: px, rem, em, pt, percent, and viewport units, with custom base font size and viewport.

Convert units

All conversions

Results appear here.

em is relative to the base font size entered. % is relative to the parent size entered.

Advertisement

One value, every unit

Type a value in any CSS unit and see it converted to all the others at once: absolute units like px, pt, and in; font-relative units rem and em; percentage against a parent you define; and viewport units vw and vh against your viewport size.

The row matching your input unit is highlighted so you can sanity-check the round trip.

Context matters

Relative units only make sense with context: rem and em resolve against the base font size (16px by default), % against the parent element's size, and vw/vh against the viewport. Set those three inputs to match your design and the conversions follow.

The math uses the CSS standard of 96px per inch, so print units convert exactly as browsers compute them.

CSS Unit Converter FAQs

What is the difference between rem and em?
Both scale with font size, but rem always uses the root font size while em uses the parent element's. With the same base entered, they convert identically here.
Why 96px per inch?
CSS defines the inch as exactly 96px for unit conversion. Browsers use this regardless of the screen's physical DPI.
When should I use vw instead of %?
vw is relative to the viewport, so it works for full-bleed sections. % is relative to the parent, better for components inside a layout.
How many decimals are shown?
Up to 4, which is plenty for CSS. Browsers happily accept long decimals, but 2-3 usually suffice in stylesheets.
Does it handle calc() expressions?
No. Enter a single numeric value; compound calc() expressions need to be resolved first.
Advertisement