html { font-size: ... }.
Paste a CSS block — every px (or rem) value will be converted using your root font size above.
| Pixels | Rem |
|---|
How the Conversion Works
The formula for both directions:
rem = px ÷ root_font_size
px = rem × root_font_sizeThe 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
1pxborder maps to 1 device pixel; a0.0625remborder can render fuzzy on scaled screens. - Box shadows — Shadow blur and offset feel more predictable in absolute units.
- Media query breakpoints —
pxbreakpoints are common and acceptable;emis recommended for zoom-awareness but not universal. - Fixed-size icons — When an icon must match a pixel grid (favicon, app icon),
pxis 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.
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.