How to use CSS Unit Converter
- Enter a value and choose its source and target units.
- Set the root or parent font size for rem or em. For percent, enter a reference size; for vw or vh, enter the viewport size in pixels.
- Read the result and the conversion path. Match the entered bases to the element and CSS property you are working on.
Example: CSS Unit Converter
Convert 2rem to pixels on a page with a 16px root.
Options
- Value
- The length as a plain number without a unit. The unit comes from the two choices below it, and the value accepts 0 to 100000.
- From unit and To unit
- The three choices are px, rem and em. Picking the same unit on both sides returns the value unchanged and still shows the bases it used.
- Root font size (px)
- The size that one rem stands for. Browsers default to 16px, and a stylesheet that sets a smaller root makes one rem smaller as well.
- Parent font size (px)
- The size that one em stands for on the element you are styling. An em measures against the parent element, so this number decides every em answer.
- Reference and viewport sizes
- One percent is reference size divided by 100. One vw is viewport width divided by 100; one vh uses viewport height. Choose these bases explicitly for the layout you are measuring.
Supported inputs and limits
Where your input is processed
This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.
Why the two font sizes stay separate
One rem figure can stand for 16px on one site and 10px on another, and an em changes again with every parent element. Showing both sizes turns a hidden assumption into a number you can check. If an answer looks wrong, compare the size in the field with the computed font size in the browser inspector before you change any CSS.
Rounding inside a compiled stylesheet
A division such as 20px into rem at a 16px root gives 1.25rem, which finishes exactly. Other pairs do not finish, and the converter rounds the printed answer to six decimal places while the arithmetic keeps more digits. When a design system stores rem values, round the final figure once instead of rounding at every step of a chain.
Questions about CSS Unit Converter
What is the difference between rem and em?
A rem is measured against the root font size set on the html element. An em is measured against the font size of the parent element, so the same number of em can be a different number of pixels in two places on one page.
Why does the formula line show a font size?
Both bases stay visible on purpose. rem multiplies by the root font size and em multiplies by the parent font size, so the line names the base that produced the answer.
What if my page sets a smaller root font size?
Type that size in Root font size and the rem answers follow it. A root set to 10px, for example, makes 2rem equal 20px on that page.
Does the tool read my stylesheet?
No. It works only with the numbers on the page, inside your browser. None of your site files or settings are uploaded.
What size should I enter for percent or viewport units?
For %, enter the size that the CSS property uses as its reference. For vw and vh, enter the viewport width and height in CSS pixels. These are your inputs; the page does not measure another site or guess the element context.