Free Online Px ↔ REM Converter
Instantly convert between CSS pixel and REM units — single values or an entire CSS block. Set your base font size, paste your stylesheet, and get clean REM output in seconds. No sign-up, no tracking, works entirely in your browser.
Quick Reference (base 16px)
| px | rem |
|---|---|
| 4px | 0.25rem |
| 8px | 0.5rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 56px | 3.5rem |
| 64px | 4rem |
| 80px | 5rem |
| 96px | 6rem |
Related Developer Tools
Last updated: May 24 2026
Reviewed by the QuickTooly Team
Px to REM Converter Guide
Why Use QuickTooly's Px ↔ REM Converter?
- Bidirectional conversion: Switch freely between px and rem — type in either field.
- Bulk CSS mode: Paste an entire stylesheet and convert every
pxvalue toremat once. - Custom base size: Change the root font size from the default 16px to match your project's
html { font-size: … }. - Quick reference table: Common px values recalculate instantly whenever you update the base.
- Private & client-side: Zero server requests — all conversion happens in your browser.
- 100% free: No account, no watermarks, no usage limits.
What Is the Difference Between px and rem?
px (pixels) is an absolute CSS unit. One CSS pixel is always the same size regardless of the user's browser preferences or the parent element's font size.
rem (root em) is a relative unit that scales with the font-size set on the html element. Most browsers default to 16px, so 1rem = 16px out of the box. When a user changes their browser's default text size for accessibility, rem-based layouts scale accordingly — pixel-based layouts do not.
The Conversion Formula
The math is straightforward:
- px → rem:
rem = px ÷ base(e.g. 24px ÷ 16 = 1.5rem) - rem → px:
px = rem × base(e.g. 1.5rem × 16 = 24px)
When Should You Use rem Instead of px?
Use rem for typography, spacing, and layout dimensions that should respect the user's browser font-size preference. Use px for things that must stay fixed regardless of text scaling — such as border widths, box shadows, or icons that must align with pixel boundaries. Modern CSS best practice generally favors rem for font sizes and em/rem for most spacing to keep layouts accessible and scalable.
How to Use the Bulk CSS Converter
The bulk mode is ideal for migrating a legacy stylesheet from px to rem:
- Set your base font size at the top of the tool (default 16px)
- Switch to Bulk CSS Converter using the tab button
- Paste your CSS — partial rules, full files, or anything in between
- Click "Convert px → REM" to replace every numeric px value with its rem equivalent
- Copy the output and paste it back into your codebase
Frequently Asked Questions
What base font size should I use?
The default browser root font size is 16px, so use 16 unless your project sets a different value via html { font-size: … }. Many projects use 10px as a base (so 1rem = 10px) to make the math easier — in that case set the base to 10.
Does the bulk converter handle decimal px values?
Yes. The regex matches both integers ( 16px) and decimals ( 1.5px ) and converts them correctly.
Will it convert 0px values?
Yes — 0px becomes 0rem. In real CSS you can omit the unit for zero, but the converter preserves the structure of your stylesheet.
Is 1rem always equal to 16px?
Only when the root font size is 16px, which is the browser default. If you or your CSS framework changes html's font-size, the ratio changes. Use the base input to match your actual project setting.
Why should I care about rem for accessibility?
Users with low vision often increase the default font size in their browser settings. Rem-based layouts scale with this preference; px-based layouts stay fixed and can make text unreadably small. Using rem for font sizes is a WCAG best practice.
Does my data leave my browser?
No. All conversion logic runs client-side in JavaScript. Nothing is sent to any server.