CSS Unit Converter

What this tool does

This converter translates a CSS length between the units you use every day — px, em, rem, %, pt, vw and vh. You enter a value and its source unit, set the context (root font-size, element font-size, and viewport width and height), and the tool instantly shows the equivalent in every other unit as a table. Several of these units are relative, so their pixel value depends on context; that is why the context is fully editable rather than assumed. Each result has a one-click copy button, and the table updates live as you type. Everything is computed in your browser.

Why you might need it

CSS mixes absolute and relative units freely, and converting between them by hand is fiddly and easy to get wrong. You might have a design handed to you in pixels that you want to express in rem for accessibility, or a spacing scale in em that you need to sanity-check in pixels. Responsive work constantly involves vw and vh, whose meaning changes with the viewport. Having a single place that does the arithmetic — with the exact root and element font-sizes from your project — removes a whole category of small mistakes and makes it easy to keep a stylesheet consistent.

How to use it

1. Enter the value you want to convert and choose its From unit.
2. Set the context: root font-size (default 16px), the element font-size used for em and %, and the viewport width and height used for vw/vh.
3. Read the results table — every other unit is shown immediately.
4. Click the copy icon on any row to copy that value with its unit, ready to paste into a stylesheet.

Formats explained

px is absolute and the common reference point. pt is also absolute: 1pt = 96/72 px, about 1.333px. rem is relative to the root font-size — change the root and every rem rescales. em is relative to the element’s font-size, so it depends on where the value is used. %, in a font context, behaves like em. vw and vh are each one percent of the viewport’s width and height respectively. The “Depends on” column in the results table names which context value each conversion relies on.

Common pitfalls

The classic mistake is treating em and rem as interchangeable. They only match when the element font-size equals the root font-size; nest an em value inside an element with its own font-size and the pixel result shifts. Percentage is the other ambiguous one — in real CSS a % can resolve against width, height, or the parent font-size depending on the property, so treat this tool’s font-relative interpretation as one common case, not a universal answer. With vw and vh, remember that the numbers depend entirely on the viewport size you enter; a value that looks right at 1280px wide will be different on a phone.

Tips and advanced use

To convert a pixel design into a scalable layout, set the root font-size to your project’s actual value and read the rem column — that is the accessible way to size type and spacing. When you build fluid layouts, plug your target breakpoints into the viewport fields to see how a vw value behaves at each size. Because the conversion is pure arithmetic running locally, you can iterate as fast as you can type, and nothing about your design ever leaves the browser.