DevToolPal
EN

PX to REM Converter

Convert px to rem or em (and back) with any base font size, see a conversion table, and convert every px value in pasted CSS at once.

Runs locally, never uploaded

Options

Direction
Unit

CSS or values

0 chars · 0 B

Result

Result appears here

What it does

This tool converts CSS lengths between pixels and the relative units rem and em. Type a single value such as 24px to get 1.5rem, list several values one per line to get them all at once, or paste a whole stylesheet and every px value in it is rewritten in place. A reference table shows the common sizes from 1px to 128px at your base font size. Nothing leaves your browser.

How to use

  1. Paste CSS, or type values one per line. Plain numbers are read as px (or as rem/em when the direction is reversed), and a value written with the other unit converts the other way.
  2. Set the Base font size. 16px is the default in every browser; some projects set html { font-size: 62.5% } to make 1rem = 10px.
  3. Choose the Direction (px → rem or rem → px), the Unit (rem or em) and how many Decimals to keep.
  4. Optionally set Keep values below to leave 1px borders and other hairlines in px.
  5. Copy the result with the button above it.

Example

/* before */
.title { font-size: 24px; margin-bottom: 12px; }

/* after (base 16px) */
.title { font-size: 1.5rem; margin-bottom: 0.75rem; }

Values that are not px, such as percentages, colors, url() file names and class names like .mt-16px, are left untouched. 0px becomes 0.

px, rem and em

  • px is an absolute unit. It ignores the reader’s preferred font size.
  • rem (“root em”) is a multiple of the html element’s font size. If a reader sets their browser to 20px, 1rem becomes 20px and the whole layout scales with it.
  • em is a multiple of the current element’s font size. It is handy for spacing that should track the text it belongs to, but nested em values multiply, which is why rem is the safer default.

Media queries are converted too: @media (min-width: 768px) becomes 48rem (or 48em), which keeps breakpoints consistent when the reader zooms text. In media queries rem and em both refer to the browser’s default font size, not to your html rule.

FAQ

› How do I convert px to rem?

Divide the pixel value by the root font size. With the browser default of 16px, 24px ÷ 16 = 1.5rem and 12px ÷ 16 = 0.75rem. To go back, multiply: 2rem × 16 = 32px.

› What is the difference between rem and em?

rem is relative to the font size of the root html element, so 1rem is the same everywhere on the page. em is relative to the font size of the current element (or its parent for font-size itself), so it compounds when elements are nested. Use rem for most sizing and em when something should scale with its own text, such as button padding.

› Why use rem instead of px?

When a reader raises the default font size in browser settings, sizes in rem grow with it, while px stay fixed. rem keeps layouts accessible and makes it easy to scale a whole design by changing one root value.

› Should I convert 1px borders?

Usually not. A 0.0625rem hairline can render blurry or vanish at some zoom levels. Set Keep values below to 2px and the converter leaves borders and other tiny values in px.