PX to REM converter, both ways.

A px to rem converter turns a pixel size into rem by dividing it by the root font size, and turns rem back into pixels by multiplying. A rem is a length in CSS that equals the font size of the root element, which is the html tag. This page does the sum for you, both ways, with a root size you can change, and also gives em, percent and points. It can convert a whole stylesheet snippet at once.

How to use it

1. Type a size in Pixels (px) and read the rem box beside it. Or type in the rem box and read the pixels.
2. If your CSS changes the root size, set 1 rem equals (px). The chips set 16, 10, 14, 18 and 20.
3. For em, set Parent size for em (px) to the font size of the parent element.
4. Pick a property under Copy the CSS as, such as font-size, and press Copy to take a ready line like font-size: 1.5rem;.
5. To convert many values, paste CSS into Your CSS. The result appears at once. Press Copy the result.
6. Press Copy link to share the page with your numbers filled in.

The formula, with examples

rem = px divided by the root size. With the usual 16px root: 12px is 0.75rem, 14px is 0.875rem, 18px is 1.125rem, 24px is 1.5rem and 32px is 2rem. Going back, 0.875rem times 16 is 14px.

The same size in a different root gives a different rem. At a root of 10px, 24px is 2.4rem. This is the idea behind setting the html font size to 62.5%: the browser default of 16px becomes 10px, so 1.6rem is 16px and the sums are easier to do in your head. It also works only while the visitor keeps the default.

Why use rem instead of px

Browsers start at a root size of 16px, and visitors can change it in their settings. A size written in rem follows that choice, and a size written in px does not. MDN's note on font-size says that to maximise accessibility, it is generally best to use values that are relative to the user's default font size. That is the reason many style guides put text, spacing and breakpoints in rem. Borders and thin lines are often left in px, because a 1px line should stay 1px.

rem and em are not the same

The rem unit looks at the root element, so 1.5rem is the same size everywhere on the page. The em unit looks at the element's own font size (or the parent's, when used in font-size), so it can compound when elements nest. If a parent is 20px and a child asks for 1.5em, the child is 30px, and a grandchild asking for 1.5em is 45px. This converter's em result divides by the parent size you give it.

Converting a whole stylesheet

Paste your CSS into the batch box. Every px value becomes rem, rounded to the decimals you set with trailing zeros removed, and 0px becomes plain 0. Three things are left alone by default: values inside url(), CSS comments, and the widths in @media, @container and @supports conditions. A value of exactly 1px (and -1px) is also kept, and you can untick that. With the example CSS, 24px 16px becomes 1.5rem 1rem, 18px becomes 1.125rem, margin-top of -8px becomes -0.5rem, and the 1px border is kept.

You can also go the other way: choose rem to px or em to px under Convert, and the box multiplies instead.

Pixels, points and the inch

The CSS Values specification defines 1in as 96px and 1pt as 1/72 of an inch. So one point is 96 divided by 72, or 1.3333px, and 12pt is 16px. The points card on this page is the pixel value times 0.75. The pixel here is a CSS pixel, not one dot on your screen.

Common problems

• The rem looks wrong in the browser. Check the root size your CSS sets on html. If it is not 16px, enter it in the root box.
• Media queries. They are left in px by default. The Media Queries spec says rem and em there are based on the browser's initial font size, not your html rule, so convert them only if you mean that.
• Long decimals. 5px is 0.3125rem. Raise Decimals for exact values or lower it for tidier ones.

Sources, checked 18 Oct 2026: MDN on CSS lengths for rem, em and the 16px default, MDN on font-size for the accessibility advice, CSS Values and Units for the inch, point and pixel, and Media Queries Level 4 for units inside queries.

To work with colours next, try the lighten and darken colour tool, or turn a hex code into RGB with the hex to RGB converter.