PX to REM Converter

Turn pixel sizes into rem units for your CSS

PX to REM Converter works out rem values from pixels, and pixels from rem, for whatever root font size your site uses. Alongside the two linked boxes there is a table of common sizes and a Convert CSS box that rewrites every px value in a pasted stylesheet as rem.

Everything is calculated in your browser as you type. The CSS you paste is not uploaded or stored.

How to convert px to rem

1. Check Root font size. It starts at 16 px, the default in every major browser; change it if your stylesheet sets a different size on the html element.
2. Type a pixel value into Pixels to get rem, or a rem value into REM to get pixels. The box you didn’t type in updates straight away.
3. Use the copy button next to either box to copy the value with its unit, such as 1.5rem.
4. To convert a whole stylesheet, paste it into Convert CSS, adjust the options, and press Copy CSS.

How values are rounded and what the CSS converter changes

• Rounding: results have at most four decimal places with trailing zeros removed, so 10 px at 16 px is 0.625rem and 10 px at 15 px is 0.6667rem.
• Reference table: eleven common sizes from 10 px to 64 px, recalculated whenever you change the root size.
• What gets converted: numbers followed by px in property values, including negatives (−8px), decimals (.5px) and several values on one line. 0px becomes 0, or 0rem inside calc() and custom properties, where a unitless zero would break.
• What is left alone: comments, quoted strings, anything inside url(…), selectors (such as .mt-10px), and other units like %, em and vh.
• Small values: anything below the “Keep values below” size (2 px by default) stays in px, so hairline borders remain exactly one device-independent pixel. Set it to 0 to convert everything.
• Status line: counts how many values were converted, how many small ones were kept and how many were left in @media conditions.

Who uses a px to rem converter

• Front-end developers: turn pixel values from a design file into rem so text and spacing scale with the reader’s font settings.
• Refactoring old CSS: move a legacy stylesheet from px to rem in one paste, then review the result before committing it.
• Design handoff: agree a spacing scale with designers by sharing the table for your root size.

rem, em and media queries

rem vs em

A rem is relative to the root font size — the size set on the html element — so 1.5rem means the same thing everywhere on the page. An em is relative to the font size of the element itself (or its parent, when used for font-size), so it compounds when elements are nested: a 1.2em list inside another 1.2em list ends up 1.44 times the base size.

That predictability is why rem is the usual choice for font sizes and spacing, while em suits things that should grow with their own text, such as the padding inside a button.

Why @media conditions stay in px by default

Inside a media query, rem and em don’t look at your html element at all. They use the browser’s default font size, normally 16 px, which the reader can change in their settings. So if your root size is 10 px, a 768 px breakpoint is 48rem in a media query, not 76.8rem.

For that reason the converter leaves media conditions in px unless you tick “Also convert @media conditions”. When you do, it always divides by 16, whatever root size you’ve entered. Values inside the rules of a media block are still converted with your root size as normal.

The 62.5% root size

Some stylesheets set html { font-size: 62.5% } so that 1rem equals 10 px with the default browser setting, which makes the arithmetic easy. If yours does, enter 10 as the root font size.

PX to REM Converter: common questions