Px ↔ Rem Converter
Convert px to rem and back at any root font size — one value or a whole CSS block at once. Only the source unit is rewritten, and a reference table covers common sizes.
Also available as a desktop app for Windows.
About this tool
A rem is whatever the root font size says it is. On a fresh browser that is 16px, so 24px divides into 1.5rem — but plenty of projects set the root to 62.5% (10px) to make the mental math easier, and a few design systems run 15px or 18px. That is why the root size here is an input, not an assumption: 24px is 1.5rem at root 16, 2.4rem at root 10, and 1.333rem at root 18.
The rewrite is deliberately narrow: in px → rem mode only values written in px are touched. If the block you paste is half migrated — some declarations already in rem — the converter leaves those alone, so you can run the same block through repeatedly without double-converting anything. The count shown above the result tells you exactly how many values were rewritten, which is the quickest way to spot that the input was not what you thought it was.
Rounding is part of the job. A 14px font at root 16 is 0.875rem exactly, but 15px is 0.9375rem — four decimals that nobody wants to read in a stylesheet. Pick two or three decimals and the tool writes a value you can actually paste; the reference table below lists the sizes that come up most, so for those you never need to type anything at all.
Frequently asked questions
- What root font size should I use?
- Whatever your stylesheet actually sets on html (or :root). Browsers default to 16px, and if your CSS never changes it, 16 is correct. If you use the 62.5% reset, enter 10. Using the wrong root is the single most common way these conversions come out silently wrong — every value shifts by the same ratio, so nothing looks obviously broken.
- Why were some values in my block left unchanged?
- Only the source unit is rewritten. In px → rem mode, values already written in rem pass through untouched — that is deliberate, so a partially migrated stylesheet can be converted in one pass without converting the same declarations twice. Switch the direction and run it again if you need the other unit.
- Should I convert everything to rem?
- Usually not. Rem is right for type, spacing and layout that should respect the user’s font-size preference. Borders of 1px, box shadows, and media query breakpoints are commonly kept in px on purpose. The tool rewrites what you select; it does not try to decide what belongs in which unit.
- Does it handle CSS functions, variables or comments?
- It rewrites every number-with-unit occurrence anywhere in the text, including numbers inside function calls such as calc, inside custom property values and inside comments. That is usually what you want — but check the count: if you only meant to convert declarations and the count is higher than expected, something in a comment matched too.
- Does anything I paste get sent anywhere?
- No. The conversion is plain string arithmetic in the page. There is no server, no request and no logging, and the tool keeps working with the network switched off.