Px to Rem Converter

How the Conversion Works

The formula for both directions:

rem = px ÷ root_font_size
px  = rem × root_font_size

The browser default root font size is 16px, so 1rem = 16px. If your CSS sets html { font-size: 62.5%; }, the root becomes 10px and 1rem = 10px — change the root font size input above to match your project.

When to still use px

• Borders — A 1px border maps to 1 device pixel; a 0.0625rem border can render fuzzy on scaled screens.
• Box shadows — Shadow blur and offset feel more predictable in absolute units.
• Media query breakpoints — px breakpoints are common and acceptable; em is recommended for zoom-awareness but not universal.
• Fixed-size icons — When an icon must match a pixel grid (favicon, app icon), px is the right unit.

The 62.5% pattern

Setting html { font-size: 62.5%; } makes 1rem = 10px, so 1.6rem = 16px and 2.4rem = 24px — simpler mental math. If you use this pattern, set the body to font-size: 1.6rem so default text is still ~16px. Enter 10 in the root font size field above to use this pattern.

Worked example

Paste a CSS rule into the bulk converter (root font size 16) and every px value is divided by 16:

Input CSS

.card {
  padding: 24px;
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid #ccc;
}

Output CSS (px → rem)

.card {
  padding: 1.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  border: 0.0625rem solid #ccc;
}

What happened

• Each value was divided by 16: 24 ÷ 16 = 1.5, 16 ÷ 16 = 1, 14 ÷ 16 = 0.875.
• The selector, the colour #ccc, and all non-px text were left untouched — only numbers followed by px changed.
• Note the 1px border became 0.0625rem. That's mathematically correct but usually not what you want — hairline borders are normally best left in px (see gotchas).

Edge cases & gotchas

• Bulk conversion is blind to intent. It converts every px, including 1px borders, hairlines, and shadow offsets you probably want to keep pixel-perfect. Review the output and revert those.
• Set the root size to match your project. Conversion uses the root font size field. If your CSS sets html { font-size: 62.5% } (10px), leave the field at 16 and every value is wrong by 1.6× — set it to 10 first.
• rem is the root; em is the parent. em compounds through nesting, so a 1.2em inside another 1.2em is 1.44× the root. rem always refers to the single root size.
• Fractional rem is normal but noisy. 15px ÷ 16 = 0.9375rem. Browsers handle the decimals fine; teams that dislike them adopt the 62.5% pattern for round numbers.
• Prefer em for media queries. For zoom-aware breakpoints, em is the most consistent unit across browsers; px breakpoints are common and fine, but ignore the user's font-size zoom.