UtilityBaseDeveloper Tools
PX to REM Converter
Convert between px, rem, and em with an adjustable base — plus bulk and a reference table.
Updated July 13, 2026
How to use the px to rem converter
- 1Enter a value and pick its unit (px, rem, or em).
- 2Set the root font size if your project isn't 16px.
- 3Read the equivalent in each unit.
- 4Paste a list of px values into the bulk box to convert many at once.
Common uses
- Converting a pixel-based design to rem
- Translating a px value from design specs to CSS
- Batch-converting a list of sizes
- Learning how rem and em relate to px
Frequently asked questions
What's the difference between rem and em?
rem is always relative to the root (html) font size, so it's predictable everywhere. em is relative to the current element's or its parent's font size, so it compounds when nested. Most designers use rem for consistent spacing and type, and em for things that should scale with their local context, like padding inside a button.
Why would I convert px to rem?
Because rem respects the user's browser font-size and zoom settings — a value in px stays fixed and can break accessibility, while the same value in rem scales. Building in rem also lets you rescale an entire layout by changing one root font size. That's why converting a px design to rem is a common step.
My project's base font size isn't 16px. Does that matter?
Yes — the conversion depends on it. 1rem equals your root font size, so at 16px, 24px is 1.5rem, but at 20px it's 1.2rem. Set the root font size field to match your project (check your html or :root CSS) and every result updates.
About this tool
The px to rem converter turns pixel values into rem and em and back, using a root font size you can change (16px by default, but not every project uses 16). Convert a single value, paste a whole list of px values to convert at once, or scan the common-values table (12–64px) for the sizes you reach for most. rem scales your whole layout when the root size or a user's zoom changes, which is why converting fixed px to rem is a common accessibility and responsive-design step. Everything runs in your browser.
Like most tools on UtilityBase, the px to rem converter runs entirely in your browser — nothing you enter is uploaded or stored on a server. It's free to use with no account required. Browse more developer tools here.
Was this tool helpful?
Related tools
Flexbox Generator
Set flexbox properties visually with a live preview and copy the CSS.
Developer Tools
CSS Grid Generator
Build a CSS grid layout visually — columns, rows, and gaps — and copy the CSS.
Developer Tools
Color Converter
Convert a color between HEX, RGB, HSL, HSV, and CMYK at once, with a live swatch and copy buttons.
Image Tools
CSS Box Shadow Generator
Design a box-shadow visually with sliders and copy the CSS instantly.
Developer Tools
What Is My IP
Your public IP, and exactly what it reveals — location, ISP, timezone.
Developer Tools
Regex Tester
Test regular expressions live with match highlighting, groups, and a cheat sheet.
Developer Tools