A CSS units converter turns a length written in one unit into its equivalent in px, rem, em, percent, vw and vh — using the root font-size, parent font-size, viewport size and percentage basis you supply, because relative units only have a pixel value in context. Type a value on the left, pick its unit, and the equivalents appear on the right. It all runs in your browser; nothing you enter is sent anywhere.
What are CSS length units?
CSS measures lengths with two families of units. Absolute units — chiefly px — map to a fixed number of device pixels. Relative units resolve against something else at the moment they are used, which is what makes them flexible and also what makes a naive converter wrong. The units this tool handles are:
| Unit | Relative to | Example |
|---|---|---|
px |
nothing — absolute pixels | 24px is always 24px |
rem |
root (html) font-size | 1.5rem = 24px when root is 16px |
em |
the element or parent font-size | 2em = 32px when parent is 16px |
% |
a property-specific basis | 50% width = half the container |
vw |
1% of viewport width | 10vw = 192px on a 1920px screen |
vh |
1% of viewport height | 10vh = 108px on a 1080px screen |
Why the extra input fields exist
Converting px to and from rem is straightforward once you know the root font-size, which defaults to 16px in every major browser. But em, %, vw and vh have no single correct pixel value — they depend on the surroundings. An em follows the parent element’s font-size. A percentage means different things for width, font-size and line-height, so you have to tell the tool what the percentage is measured against. And vw/vh change with the viewport, which differs on every device. Rather than pretend those units convert cleanly on their own, this converter asks you for the context so the result is honest and exact. The viewport fields are pre-filled with your current window size as a convenience.
A worked example
Suppose your design system uses a 16px root font-size and you want a heading set to 2rem. Enter 2 and rem: the tool anchors it to 32px, then reports 2em (against a 16px parent), 200% (against a 16px basis), and roughly 1.667vw on a 1920px-wide screen. Change the root font-size to 20px and the same 2rem now resolves to 40px, and every other equivalent updates with it. That instant recalculation is the point: you can see how one length behaves under different contexts without redoing the maths.
When to use each unit
- rem — font sizes and spacing that should respect the user’s browser font-size preference. Predictable across the whole page.
- em — spacing inside a component that should scale with its own text, such as button padding tied to its label size.
- % — fluid widths and heights that track their container.
- vw / vh — full-bleed sections, fluid type, and elements sized to the screen. Watch out for
vhquirks with mobile browser toolbars. - px — hairline borders and other details that must not scale.
Accuracy and privacy
The conversion is ordinary arithmetic — everything is normalised to pixels and back — so there is no rounding beyond a six-decimal display tidy-up that never affects rendering. Because it is just maths, the whole tool runs locally in your browser: there is no upload, no logging, and no third-party analytics on this page. Load it once and it keeps working offline.