CSS unit converter
Convert between px, em, rem, pt and % using a configurable root font-size and parent font-size. Runs on your device.
Runs on your device. The file is never uploaded.
CSS unit converter turns a length in px, em, rem, pt or % into another, defaulting to px into rem. rem divides by rootSize, em and % by parentSize, both defaulting to 16, and pt sits at 96/72 px. Here % is a share of the parent font-size, not of width or height, and vw and vh are missing.
Questions
Which units does it convert?
px, em, rem, pt and %, in any combination, defaulting to px into rem. Everything routes through pixels: rem divides by the root font-size, em and % divide by the parent font-size, and pt is fixed at 96/72 px, which is the CSS definition of a point rather than a printer's one.
What do the root and parent font-size settings do?
They supply the two references the relative units need. rootSize is the font-size on the html element and is what rem measures against; parentSize is the font-size of the parent element and is what em and % measure against. Both default to 16, the usual browser default. If your page sets html { font-size: 62.5% }, put 10 in rootSize.
Why do I get a long decimal?
Because nothing is rounded. The result is printed as the raw division, so a value that does not divide cleanly comes back with its full floating-point tail. Round it yourself to two or three decimal places for the stylesheet; browsers do not need more than that, and a shorter number is easier to read in a diff.
Does % here mean a percentage of the parent width?
No. % is treated as a font-size percentage relative to parentSize, so 100% equals the parent font-size and 50% is half of it. Percentages of width, height or the viewport are a different thing and this tool does not model them. vw, vh and other viewport units are not in the list at all.
Why did it refuse my input?
One of the three number fields did not parse. The message is "value, rootSize and parentSize must all be numbers", and it fires when any of them fails a finite-number check. The usual cause is leaving the unit in the value box: type 16, not 16px, since the unit comes from the from dropdown.
What does the answer line show?
The conversion plus the two references used, for example 16px = 1rem (root 16px, parent 16px). Having the references on the same line matters, because the same px value converts to a different rem number the moment the root size changes.