PX to REM Converter — Convert CSS Units Instantly
Pixels
16px Root em
1rem Em
1em | Pixels | REM |
|---|
Type a value in px, rem, or em and get the equivalent in all three units at once, based on a root font size you control. A live reference table shows the rem equivalents of common pixel sizes — handy when moving a design from fixed pixels to scalable units.
How it works
- 1 Enter a value Type the number you want to convert and pick its unit — px, rem, or em. The other two units update as you type.
- 2 Set the root font size The default is 16px, the browser standard. Change it if your stylesheet sets a different font-size on the html element (e.g. 62.5% for a 10px base).
- 3 Use the conversion table Below the converter, a table lists rem equivalents for common pixel sizes (1px to 128px) at your chosen root size — copy values straight into your CSS.
Your data stays private
All processing happens entirely in your browser. No files, text, or data are ever sent to our servers. You can disconnect from the internet and this tool will still work.
Frequently asked questions
- How do I convert px to rem?
- Divide the pixel value by the root font size. With the default 16px root, 24px ÷ 16 = 1.5rem. This tool does the division for you and handles any root size.
- What is the difference between rem and em?
- rem is relative to the root (html) font size, so 1.5rem is the same everywhere on the page. em is relative to the current element's own font size, so it compounds when elements nest. This converter assumes the element font size equals the root — if your element inherits a different size, the em value will differ.
- Why use rem instead of px?
- rem scales with the user's browser font-size setting, so text and spacing grow when someone increases their default font size — important for accessibility. px values stay fixed regardless of user preferences.
- What is the 62.5% trick?
- Setting html { font-size: 62.5% } makes 1rem equal 10px (62.5% of 16px), so mental math gets easier: 1.6rem = 16px. Set the root font size to 10 in this tool to work with that convention.
- What rem values do Tailwind classes use?
- Tailwind's spacing scale is rem-based at a 16px root: p-4 is 1rem (16px), text-sm is 0.875rem (14px), and each spacing step is 0.25rem (4px). The conversion table covers the whole scale.
From the blog
PX to REM: How the Conversion Works and Why It Matters The math behind px-to-rem conversion, when em bites back, and how a 16px root became the web's default. Read the post →Related tools
CSS Border Radius Generator Build border-radius code visually with per-corner sliders and a live preview. Color Converter Convert colors between HEX, RGB, HSL, and HSV formats. CSS Gradient Generator Build linear and radial CSS gradients visually. Aspect Ratio Calculator Find equivalent dimensions when scaling a rectangle.