Px to Rem Converter

Convert pixel values to rem (and back) instantly. Single-value calculator plus bulk CSS conversion. All in your browser.

px Default browser is 16px. Change if your CSS sets html { font-size: ... }.
Pixels
Rem
Bulk CSS Conversion

Paste a CSS block — every px (or rem) value will be converted using your root font size above.

Reference table — base 16px
PixelsRem

Why use rem instead of px?

Accessibility. Users can change their browser's default font size — common for users with low vision. Pixel values ignore this preference; rem values scale with it. A button styled padding: 1rem 2rem; font-size: 1rem; grows proportionally when a user increases their font size, while padding: 16px 32px; stays the same.

Consistency. One root font size controls all your spacing and typography. Need to scale your whole UI 25% larger for a tablet view? Change html { font-size: 20px; } and every rem value scales together.

How the conversion works

The formula is straightforward:

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%; } (a common trick to make math easier), the root becomes 10px and 1rem = 10px — change the root font size input above to 10.

When to still use px

  • Borders — A 1px border is 1 device pixel; a 0.0625rem border can look fuzzy when scaled.
  • Box shadows — Same reason: shadow blur and offset feel more natural in absolute units.
  • Media query breakpoints — Modern advice prefers em for breakpoints to respect zoom, but px is still common and acceptable.
  • Iconography sizing — When an icon must match a fixed pixel grid (favicon, app icon), px is appropriate.

The 62.5% pattern

Many design systems use html { font-size: 62.5%; } which makes 1rem = 10px. The math is simpler: 1.6rem = 16px, 2.4rem = 24px. The downside is that you override the user's browser font size choice. If you go this route, set the body to font-size: 1.6rem so default text is still ~16px.

Frequently Asked Questions

What is the formula for converting px to rem?

rem = px ÷ root_font_size. The browser default root font size is 16px, so 24px ÷ 16 = 1.5rem. If you change the root font size with html { font-size: ... }, divide by that value instead.

Why use rem instead of px?

rem scales with the user's browser font size setting, which is critical for accessibility. A user who increases their browser font size to 20px (because they have low vision) will see your 1rem spacing grow proportionally; 16px spacing stays at 16px regardless.

What's the difference between rem and em?

em is relative to the parent element's font size. rem is relative to the root element's (html) font size. rem is more predictable because it has a single source of truth, while em compounds when nested.

Is my CSS sent to a server?

No. All conversion happens in your browser. Your CSS never leaves your device.

Does this work with Sass / SCSS?

Yes. Paste a Sass block into the bulk converter — it operates on raw text and only touches numeric values followed by px or rem. Variables, mixins, and selectors are preserved.

Related Tools