About CSS Units Converter
CSS Units Converter turns a single value between pixels, em, rem and points, which is the conversion that comes up whenever a design hands over measurements in one unit and the stylesheet wants another. Everything is routed through pixels: the value is first expressed in pixels, then converted from pixels into whichever unit you picked as the target. That makes the result easy to reason about and means any pair of the four units can be converted directly.
Em and rem are handled by one branch, multiplied by the base font size going in and divided by it coming out, with the base defaulting to sixteen - the usual browser default. Points are handled separately at the fixed ratio of ninety-six pixels to seventy-two points, so sixteen points reads as a little over twenty-one pixels and twenty-four pixels comes back as exactly eighteen points. Because em and rem share the same base, the tool models the root font size only.
Two rough edges are worth knowing. The base field accepts any number, and setting it to zero removes the scale, so a value entered in em or rem collapses to zero and then turns into NaN if the target is also em or rem, while a value entered in px or pt converted into em or rem gives Infinity - either way the page displays what comes out rather than flagging it as an error. And the answer arrives as raw floating point with no unit on the end and no rounding, so expect to round it yourself before it goes into a stylesheet.
How to use CSS Units Converter
- 1 Enter the value you want to convert.
- 2 Pick the unit you are converting from and the unit you are converting to.
- 3 Set the base font size if your project does not use sixteen pixels as the root.
- 4 Read the result, which is a bare number with no unit suffix.
Frequently asked questions
Is there a difference between em and rem here?
No. Both multiply and divide by the same base, so the tool models the root font size only. The real difference - em compounds with nesting while rem always refers back to the root - is not represented.
What is the base font size for?
It is the pixel size that one em or one rem is taken to be, and it defaults to sixteen. Change it if your project sets a different root size. Setting it to zero removes the scale: a value entered in em or rem collapses to zero and then turns into NaN if the target is also em or rem, while a value entered in px or pt converted into em or rem gives Infinity.
How are points converted?
At the CSS fixed ratio of ninety-six pixels to seventy-two points, independent of the base. Sixteen points is a little over twenty-one pixels, and twenty-four pixels is exactly eighteen points.
Can I copy the result straight into my stylesheet?
Not as it stands. The output is a bare unrounded number with no unit suffix, so you have to add the unit yourself. There is no option to round to a fixed number of decimal places and no formatted declaration is produced.
Free, online, and private
Free to use
CSS Units Converter is completely free. There is no account to create, no login, and no hidden charge or usage limit.
Runs online in your browser
It is a free online tool that runs entirely in your browser. Nothing to download or install — open the page and start using it right away.
Your data stays private
All processing happens locally on your device. Your input is never uploaded, stored, or tracked, so it never leaves your browser.
How CSS Units Converter behaves in detail
These are the specifics of this implementation — the exact ranges, defaults and fixed settings you are working with.
| Parameter | Value |
|---|---|
| Input | a numeric value field, a From unit and a To unit, and a base font size field starting at sixteen |
| Units | four choices - px, em, rem and pt - offered identically in both the source and the target lists |
| Route | everything is converted to pixels first and then to the target, using the base for em and rem and a fixed ratio for points |
| Points | one point is 72 to the inch and one pixel 96 to the inch, so 16 pt reads as 21.333333333333332 px and 24 px reads as 18 pt |
| Em and rem | both are handled by the same branch - multiplied by the base going in and divided by it coming out - so the two behave identically |
| Result | a single bare number with no unit suffix, no rounding and no formatting |
Compiled from the implementation of this tool and checked against it by itoolnet.
What CSS Units Converter does not do
Knowing the edges of a tool saves more time than another list of its features. These are the cases where it will not do what you might expect.
- The base value has no guard on it. Setting it to zero removes the scale entirely: a value entered in em or rem collapses to zero, which then turns into NaN if the target is also em or rem, while a value entered in px or pt and converted into em or rem divides a non-zero number by zero and returns Infinity. Either way the page prints what comes out rather than flagging it as an error.
- Em and rem are not distinguished. Both multiply and divide by the same base, so the tool models the root font size only - the real difference between em, which compounds with nesting, and rem, which always refers back to the root, is not represented at all.
- Nothing is rounded and nothing is labelled. Results arrive as raw floating point - sixteen points comes back as 21.333333333333332 - with no unit on the end, no option to round to a fixed number of places, and no way to copy the answer as a ready-to-paste CSS declaration.
Tested and documented by itoolnet, the team that builds and maintains this site.