CSS Unit Converter for px, rem, and em
The CSS Unit Converter turns a px to rem (or rem to px, px to em) value into every other unit the instant you type, using your own base font size. Enter a number, pick the unit you started from, and read px, rem, and em side by side.
It is built for front-end developers and designers moving a layout from fixed pixels to relative units. Set the base font size to match your html { font-size }, and the math stays accurate to your real project instead of a hard-coded 16px assumption.
How to Convert CSS Units
Set your base font size
The Base Font Size starts at 16px, the standard browser default. Change it to match your project's root html { font-size } so rem and em results are accurate.
Choose the input unit
Click the px, rem, or em tab to tell the converter which unit your value is in.
Enter a value
Type any number and watch px, rem, and em update in real time. Tap a Try-examples button like 16px or 1.5rem to load a common value instantly.
Copy the result
Click the copy button next to any row to copy the value with its unit suffix, such as 1.5rem, ready to paste straight into your CSS.
Need a single direction? Open a focused pair such as PX to REM, REM to PX, or PX to EM. Both fields are editable, so you can type in either one, and the Swap button flips to the reverse pair while keeping your value.
Features
Real-Time Conversion
Values update the moment you type, converting between px, rem, and em with no button to press.
Customizable Base Font Size
Set the root font size from 1 to 100px (default 16px) so rem and em match your real project.
Adjustable Decimal Precision
Choose 1 to 6 decimal places to control how precise the converted output values are.
Bidirectional Pairs
In the focused PX to REM, REM to PX, and PX to EM pairs, type in either field and the other follows.
Swap Direction
One click reverses a conversion pair and carries your current value to the opposite direction.
Quick Reference Table
An expandable table shows 18 common pixel values from 8px to 96px alongside their rem and em equivalents.
One-Click Copy
Copy any result with its unit suffix attached, like 1.5rem, so it pastes directly into your stylesheet.
Quick Example Buttons
Preset buttons for common sizes such as 12px, 16px, 24px, and 1.5rem load a value with one tap.
Unit Info Cards
Short cards explain what px, rem, and em are and when each unit is the right choice.
Saved, Shared Settings
Your base size and decimal precision persist via localStorage and sync across the main page and every pair.
Frequently Asked Questions
How do you convert px to rem?
Divide the pixel value by the base (root) font size: rem = px ÷ base. With the default 16px base, 24px becomes 1.5rem. This converter does the division for you and updates the moment you type, so you never run the formula by hand.
What is the rem to px formula?
Multiply the rem value by the base font size: px = rem × base. At a 16px base, 1.5rem equals 24px. Change the Base Font Size field if your project uses a different root size, and the result follows.
Is rem always based on 16px?
16px is only the default. rem is relative to the root <html> font size, which most browsers set to 16px, but you can change it in CSS. That is why the converter exposes a Base Font Size field — set it to your project's actual root size for accurate results.
What is the difference between em and rem?
rem is always relative to the root element's font size, so it stays consistent across the whole page. em is relative to the parent element's font size, which means em values compound when elements are nested — 1.2em inside 1.2em resolves to 1.44× the root size.
When should I use rem instead of px?
Use rem for typography, spacing, and layout sizes you want to scale with the user's preferences — readers who raise their browser's default font size benefit from rem-based designs. Keep px for things that should stay fixed, such as borders and box shadows.
Why does the PX to EM pair show "Parent Font Size"?
Because em is relative to the parent element's font size rather than the root. The label switches to Parent Font Size as a reminder that the reference size depends on where the element sits in the DOM, not on the root <html> size.
Are my settings saved between visits?
Yes. Your base font size and decimal precision are stored in your browser's localStorage and shared across the main converter and every focused pair. They persist after you close the browser, and nothing is sent to a server.
No comments yet. Be the first to comment!