Web Tools
CSS Unit Converter
Convert relative CSS units with the context that determines their real size.
CSS Unit Converter tool
Loading tool…
Jump to a section
About This Tool
CSS lengths are not all absolute. A rem depends on the root element's font size, an em depends on the relevant font size for the property, viewport units depend on the viewport, and percentages depend on the property's reference dimension. This converter makes those assumptions visible instead of silently treating every relative unit as if it had one universal pixel value. Use it while translating design specs, checking responsive dimensions, moving between pixel-based mockups and scalable typography, or understanding how a relative value resolves under a specific layout context.
How To Use It
- Enter the numeric CSS value and choose its source and destination units.
- Set the root and parent font sizes used for rem and em conversions.
- Set viewport width and height for vw and vh, and set the pixel size that represents 100% for percentage conversions.
- Copy the converted CSS value. Recalculate when the layout context changes because relative units are intentionally context-dependent.
Examples
16px to rem
With a 16px root font size, 16px equals 1rem and 24px equals 1.5rem.
2em with a 20px parent size
Using a 20px reference font size, 2em resolves to 40px. If that reference becomes 16px, the same 2em resolves to 32px.
10vw on a 1440px viewport
One vw is 1% of the viewport width, so 10vw resolves to 144px when the viewport is 1440px wide.
50% of a 320px reference
When the relevant percentage base is 320px, 50% resolves to 160px. CSS percentage bases vary by property, so choose the reference that matches your layout.
Useful Notes
px and rem
A CSS px is the reference pixel unit. rem is relative to the root element's font size: rem × root font size = pixels. Browsers commonly start with a 16px default font size, but authors and user settings can change the effective value, so 16px = 1rem is an assumption rather than a law.
em depends on context
For font-size, em is relative to the parent element's computed font size; for some other properties it relates to the element's own font size. This calculator labels the input as a parent/reference font size so you can provide the relevant computed size instead of assuming em always equals rem.
vw and vh
1vw equals 1% of the viewport width and 1vh equals 1% of the viewport height in the traditional viewport-unit model. Responsive layouts therefore resolve the same numeric vw or vh value to different pixel sizes as the viewport changes.
Percentages need a reference
CSS percentages are resolved against a property-specific reference. Width percentages commonly relate to a containing block's width, while other properties can use different bases. The converter therefore asks for the pixel dimension representing 100% rather than guessing what the percentage means.
When conversion is only a snapshot
Converting a relative unit to pixels describes one chosen context. It does not preserve the responsive behavior of rem, em, vw, vh, or percentages. If the root font, parent size, viewport, or containing block changes, the resolved pixel value can change too.
Precision and negative values
CSS lengths can be fractional and many properties allow negative lengths, so the calculator accepts decimals and negatives. Displayed results are rounded to at most six decimal places; browser layout engines may retain additional internal precision.
FAQ
Is 1rem always 16px?
No. 16px is a common browser default, but rem uses the root element's computed font size. Change the root font size field to match the page you are working on.
Are em and rem interchangeable?
Only when their reference font sizes happen to be equal. rem uses the root font size, while em uses a context-dependent font size.
Why does the tool ask for a 100% reference size?
A percentage does not have one universal pixel conversion. The relevant CSS property defines what 100% refers to, so the tool needs that dimension explicitly.
Does converting vw to px make a design responsive?
No. The pixel result is a snapshot for the viewport width you entered. vw itself remains responsive because its resolved size changes with the viewport.