One value into every unit, or a whole stylesheet from px to rem.
rem measures against the root, em against the parent, and the viewport units against the window. Change these to match the page you are working on.
| Unit | Value | Copy |
|---|
CSS has more length units than anyone can hold in their head, and half of them are relative to something else. A pixel is fixed. A rem is a multiple of the root font size. An em is a multiple of whatever the parent is set to, which is why em values compound when you nest them. Viewport units are a percentage of the window. So converting between them is arithmetic, but only once you know the context.
This tool asks for that context up front, then shows one value in every unit at the same time rather than making you pick a pair and convert again for the next one. Change the root size to 20 and the whole table moves.
The second half is the part that saves real time. Paste a whole stylesheet and it rewrites every length from one unit to another, skipping the ones you never want converted. One pixel borders stay one pixel. Media query breakpoints stay in pixels, which is what you want, because a rem breakpoint changes meaning when someone bumps their browser font size. Numbers inside strings, comments and url() are left alone, because a filename with 16px in it is not a length.
Most unit conversion happens for one of a few reasons.
Working on the same file? The CSS Formatter tidies it first, the CSS Minifier compresses it after, and the CSS to SCSS Converter nests it. Or browse all our free developer tools.
Because rem respects the reader. Someone who sets a larger default font size in their browser gets larger text everywhere a rem is used, and no change at all where pixels are. That setting exists for people who need it, and a stylesheet in pixels quietly ignores them. The practical rule most teams land on is rem for anything type related and spacing, pixels for hairlines and anything that genuinely should not scale.
Both are multiples of a font size. The difference is which one. A rem always looks at the root element, so it means the same thing everywhere in the document. An em looks at the element's own font size, inherited from its parent, which means ems compound. Put font-size: 0.9em on a list and nest three of them and the innermost text is at 73 percent, which is almost never what anyone intended.
Pixels, most of the time, and that's why the tool leaves media query values alone by default. A breakpoint is about the size of the device, not the size of the text, and a rem breakpoint moves when someone changes their font setting, which can flip the layout at an unexpected moment. There are teams who deliberately use rem breakpoints so the layout adapts to text size too. Both positions are defensible, but the pixel one surprises people less.
Because the minimum is set to 2 by default. Hairlines are the one place pixels are almost always right, since 0.0625rem is harder to read and rounds to something unpredictable at odd zoom levels. Set the minimum to 0 if you want every value converted.
They're exact against the CSS definition, which fixes one inch at 96 pixels regardless of the actual screen. So 1in is 96px, 1pt is 96 divided by 72, and 1cm is 96 divided by 2.54. On paper these become real physical measurements. On a screen they don't, since the browser has no idea how large your monitor is.
ch is the width of the zero character in the current font, and ex is the height of a lowercase x. Both depend entirely on the typeface, so this tool uses a sensible average and lets you treat the result as an estimate. ch is genuinely useful for line length, where something like max-width: 65ch gives you a comfortable measure without guessing at pixels.
No. Everything runs in your browser, with no network request and nothing stored. Close the tab and it's gone.