CSS Unit Converter

Convert between px, em, rem, vw, vh, pt, cm, mm, and inch CSS units with a configurable root font size.

Tested tool guide Tested browser tools Checked August 16, 2026

What CSS Unit Converter does, with a checked example

CSS Unit Converter translates a numeric CSS length among px, em, rem, vw, vh, pt, cm, mm, and in. The configured root font size supplies the baseline for root-relative results, while viewport-relative results require a viewport width or height. The common surprise is that em and rem are not universal synonyms: rem follows the root element's font size, while em depends on the font-size context where the CSS value is used.

Worked example

A concrete input and expected output from the current implementation.

Input

value: 32 px; convert to: rem; root font size: 16 px

Expected output

2 rem

At a 16 px root, one rem is 16 px. Dividing 32 px by 16 px per rem gives exactly 2 rem; multiplying 2 rem by the same root size returns 32 px.

How the result is produced

Font-relative conversion

For px-to-rem conversion, the pixel value is divided by the configured root font size; reversing the direction multiplies by it. With a 16 px root, 32 px divided by 16 px per rem equals 2 rem. Any em conversion also needs a font-size basis, so interpret its result within the font context represented by the conversion.

Absolute and viewport ratios

CSS absolute units have exact canonical relationships: 1 in equals 96 px, 72 pt, 2.54 cm, or 25.4 mm. Viewport units use a different basis: 1 vw is one percent of viewport width and 1 vh is one percent of viewport height. A px conversion for either therefore has meaning only for the viewport dimensions behind the result.

Good uses

Convert pixel-based spacing or typography values into rem values for a chosen root font size.
Translate pt, cm, mm, or in measurements into their canonical CSS pixel equivalents.
Compare a vw or vh layout value with pixels for a known viewport width or height.

Limits and checks

An em conversion is conditional. Nested font sizing, inherited values, or using em in font-size can make the browser's actual pixel value differ from a result based on another font-size context.
vw and vh are not fixed sizes. Their pixel equivalents change with the viewport, and this converter's listed units do not include svw, lvw, dvw, svh, lvh, or dvh.
cm, mm, in, and pt results are CSS absolute-unit equivalences. They do not prove that an on-screen object will match a physical ruler on every display.

Common questions

Why can an em result be wrong inside my component?

Because em is resolved in the element's font-size context, not automatically from the document root. For most properties it uses the element's computed font size; on font-size itself it is relative to the inherited font size. No single conversion is correct for every nesting level unless those font sizes are the same.

Can vw or vh be converted to a permanent px value?

No. They can be converted to px only for stated viewport dimensions: 1 vw is 1 percent of width and 1 vh is 1 percent of height. If the viewport changes, the px equivalent changes too. For a fixed design target, record the width and height used when reading the converter's result.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.