PX to REM Converter for CSS

How it works

Paste your CSS into the left panel and the rem version appears on the right as you type. The maths is one division: rem = px ÷ root font size. Browsers default to a 16 pixel root, so 16px is 1rem, 24px is 1.5rem and 14px is 0.875rem. If your stylesheet sets html { font-size: 62.5% }, the root is 10 pixels: type 10 in the box and 24px becomes 2.4rem. The converter reads your file as CSS rules, not as loose text, so only the part after a colon is changed. A class name like .mt-16px, a file name like url(icon-16px.png) and anything inside quotes stay exactly as they were, and unitless numbers such as line-height: 1.5 are not touched. If you only have a list of numbers — 16, 24, 32 copied from a Figma file, say — each line is converted as a separate value. The result line tells you how many values were converted, how many hairlines were left in px and how many media query values were calculated on the 16 pixel base. To go the other way, choose rem → px under Direction.

This tool is also known as px to rem, px to rem converter, rem to px, convert px to rem css, pixels to rem, rem calculator.

What is rem?

rem (root em) is a CSS length unit measured against the font size of the root element, the html tag. 1rem equals the html font-size, which browsers set to 16 pixels by default. When a visitor raises the text size in their browser settings, everything written in rem — text, spacing and widths — grows together. That is why accessible designs size type and spacing in rem. Unlike em, rem does not compound inside nested elements: every part of the page uses the same root.

What is px (CSS pixel)?

A CSS px is not a physical screen pixel but a reference unit: it is defined as the size of a dot that looks 1/96 of an inch wide from roughly arm's length. On high-density phone screens one CSS pixel is drawn with two or three physical pixels. px behaves like a fixed unit: it ignores the text size a visitor chose in their browser. That makes it right for details that must keep the same thickness, such as borders and shadows, and a weak choice for font sizes.

What is the difference between px and rem?

px is fixed: a paragraph set to font-size: 14px stays 14 pixels even when the visitor has chosen a large default text size. rem follows that choice: 0.875rem is 14 pixels with default settings and 17.5 pixels for someone who raised the default to 20 pixels. Two pages that look identical at default settings behave differently for those readers — one stays small, the other grows with them. Use rem for type, spacing and page widths, and px for details such as thin borders and shadows whose thickness should never change.

Why rem in a media query is always based on 16

This is the trap most px-to-rem migrations fall into. Inside a declaration, rem follows the font size of the html element: with html { font-size: 62.5% }, 1rem is 10 pixels. A media query such as @media (min-width: …) does not see that setting. Media queries are evaluated before the page's styles apply, so rem there means the browser's initial font size — 16 pixels unless the visitor changed it.

So if you assume a 10 pixel root and turn a 768px breakpoint into 76.8rem, the layout switches at about 1,228 pixels instead of 768 and your tablet view ends up on desktop screens. This tool converts values inside @media lines with 16, whatever you type in the root box (768px → 48rem), and counts them in the result line.

• Inside a declaration: rem = px ÷ your root size
• Inside a media query: rem = px ÷ 16 (the browser's initial value)
• If a visitor enlarges the default text size, both grow together — that is where the accessibility gain comes from

Which values should stay in px

Converting everything to rem is not the goal. rem pays off when a visitor raises the browser's text size and type, spacing and container widths grow with it, keeping the page readable for people with low vision. Where that growth adds nothing, px is the safer choice.

A 1 pixel border is the classic case. At 0.0625rem it drops below one pixel as soon as someone picks a smaller text size, and browsers round fractional borders differently, so the line looks blurry on one screen and heavy on another. A border is meant to stay the same thin line everywhere, not to scale. That is why values of 1px or less are kept in px by default; switch the option if you want them converted too. Shadow offsets, icon stroke widths and the real pixel size of images usually stay in px as well.

• Convert to rem: font-size, padding, margin, gap, max-width, breakpoints
• Keep in px: 1px borders, thin dividers, shadow offsets
• Keep unitless: line-height (such as 1.5), z-index, flex ratios

Frequently asked questions

How many rem is 16px?

With the default 16 pixel root, 16px is exactly 1rem. On the same base 12px is 0.75rem, 14px is 0.875rem, 18px is 1.125rem, 24px is 1.5rem and 32px is 2rem. If your html element has a different font-size, enter that value in the root box.

What is the difference between rem and em?

rem is always based on the font size of the html element, so it gives the same result anywhere on the page. em is based on the font size of the element it sits in, so it compounds in nested elements. This converter only works between px and rem; em values are left alone.

I use font-size: 62.5%. What root size should I enter?

62.5% of 16 pixels is 10 pixels, so enter 10: 24px becomes 2.4rem and 14px becomes 1.4rem. Values inside media queries are still converted with 16, because media queries do not see the font-size set on the html element.

Will my class names and image file names break?

No. Only the value part of CSS declarations is converted. Selectors like .p-16px, addresses like url(background-32px.png), quoted strings and comments stay exactly as they are.

Is my CSS sent anywhere?

No. The conversion runs entirely in your browser; the stylesheet you paste is never sent to a server.

Sources

• W3C — CSS Values and Units Module Level 4, §6.1 font-relative lengths (rem)