CSS Unit Converter (px, rem, em, vw, pt…)

Convert CSS lengths between px, rem, em, %, vw, vh, vmin, vmax, pt, pc, in, cm, mm and Q with your own root font size and viewport. Free and instant.

Value

From

Root font size (px, for rem)

Parent font size (px, for em and %)

Viewport width (px)

Viewport height (px)

1rem

Absolute units follow CSS: 1in = 96px = 2.54cm = 72pt = 6pc, 1Q = 0.25mm. rem uses the root font size; em and % use the parent font size (as for font-size); vw/vh/vmin/vmax use the viewport. Results are rounded to 4 decimals.

What is CSS Unit Converter?

Convert a CSS length between absolute units (px, pt, pc, in, cm, mm, Q) and relative units (rem, em, %, vw, vh, vmin, vmax). Set the root font size, parent font size and viewport size so relative units are computed for your real context; all units are shown at once.

How to use CSS Unit Converter

Enter the Value and choose From and To units.
Adjust Root font size (for rem), Parent font size (for em and %) and the viewport width and height.
Copy the main result or click any unit card to copy that value.

Example

Input

24px (root 16px)

Output

1.5rem · 18pt · 1.25vw (1920px viewport)

When to use CSS Unit Converter

Use it when turning design specs in px into rem-based CSS, or checking what a vw value means on a given screen. % is only equivalent to em for font-size; for width or padding, % refers to the containing block, which this tool cannot know.

How CSS Unit Converter works

Everything is converted through CSS pixels. Absolute units use the fixed CSS ratios: 1in = 96px = 2.54cm = 25.4mm = 72pt = 6pc, 1Q = 0.25mm. rem multiplies by the root font size, em by the parent font size, % is a percentage of the parent font size (the font-size interpretation), vw/vh are 1% of the viewport width/height and vmin/vmax use the smaller/larger side. Results are rounded to 4 decimals.