How do I convert px to rem?

Type the pixel value into the px field and read the rem field. rem is the value divided by the root font size, so at the default 16px base, 16px is 1rem and 24px is 1.5rem.

How do I convert rem to px?

Type the value into the rem field and read px. rem to px is the value multiplied by the root font size, so 2rem at a 16px base is 32px.

What base font size does the converter use?

It defaults to 16px, the standard browser root font size, and you can change it in the Root font size field. That base drives every rem, em and % result so they match your stylesheet.

Why is 1pt equal to 1.3333px here?

CSS defines 1pt as 1/72 inch and 1px as 1/96 inch, so 1pt = 96/72 px = 1.3333px. That is why 12pt converts to exactly 16px, the common body-text size.

What is the difference between em and rem?

rem is relative to the root font size, while em is relative to the element's own font size. This tool uses one base for both for simplicity, so they read the same; set the root font size to model the rem side.

Is the conversion done on a server?

No. The CSS unit conversion runs entirely in your browser with plain arithmetic, so the values you enter stay on your device.

CSS Unit Converter

Convert CSS length units — px, rem, em, pt and % — live in your browser. Set a root font size and every unit updates instantly.

Every conversion is computed locally in your browser; the values you type are never uploaded.

Working with CSS colors? Try the CSS Color Converter.

About CSS Unit Converter

This CSS unit converter turns a length you type in one unit into every other CSS unit at once — px, rem, em, pt and %. Enter a value in any field and the others update live, so you can read a px to rem or pt to px result without doing the math by hand. A root font size input (16px by default) drives the rem, em and % relationships, which mirrors how browsers resolve relative units against the page's font size. A built-in quick reference shows the common px-to-rem values designers reuse — 12, 14, 16, 24, 32 and more — at your chosen base. Each result has a copy button so you can drop it straight into a stylesheet. Everything runs in your browser, so the values you type stay on your device.

Features

Converts between px, rem, em, pt and % the moment you type in any field
A configurable root font size drives rem, em and % so results match your CSS
Accurate pt conversion using the CSS 96/72 factor (1pt = 1.3333px)
Treats % as a fraction of the root font size, just like font-relative CSS
Quick reference table of common px-to-rem values (12, 14, 16, 24, 32) at your base
Trims results to a sensible precision and drops trailing zeros for clean values
One-click copy on every unit, with the unit suffix included
Remembers your last value and base font size between visits

How to use the CSS Unit Converter

Set the root font size if it differs from the 16px browser default.
Type a value into any unit field — px, rem, em, pt or %.
Read the equivalent value in every other unit as it updates live.
Click the copy button next to a unit to grab the value with its suffix.
Use the quick reference table for common px-to-rem pairs at your base.

Example

Input

/* root font-size: 16px */
.card { padding: 24px; }

Output

.card { padding: 1.5rem; }

/* 24px = 1.5rem = 18pt = 150% at base 16px */

At a 16px base, 24px equals 1.5rem — handy for switching a layout to rem.

Common errors & troubleshooting

Your rem and % results look wrong even though px is right. — Check the root font size. rem, em and % are resolved against that base, so set it to match the font-size on your :root or html element.
pt does not match what you see in a design tool. — This converter uses the CSS definition where 1pt = 96/72 px (1.3333px). Print or DTP tools may assume 72dpi, which gives 1pt = 1px instead.
em and rem show the same number, but you expected them to differ. — The converter uses a single base for both to keep things simple. In real CSS, em is relative to the element's own font size while rem is relative to the root, so they only diverge when a parent changes font-size.
The fields clear when you leave the root font size empty. — An empty or zero base is treated as invalid; the converter falls back to 16px. Type a positive number to drive rem, em and % yourself.

Frequently asked questions

How do I convert px to rem?: Type the pixel value into the px field and read the rem field. rem is the value divided by the root font size, so at the default 16px base, 16px is 1rem and 24px is 1.5rem.
How do I convert rem to px?: Type the value into the rem field and read px. rem to px is the value multiplied by the root font size, so 2rem at a 16px base is 32px.
What base font size does the converter use?: It defaults to 16px, the standard browser root font size, and you can change it in the Root font size field. That base drives every rem, em and % result so they match your stylesheet.
Why is 1pt equal to 1.3333px here?: CSS defines 1pt as 1/72 inch and 1px as 1/96 inch, so 1pt = 96/72 px = 1.3333px. That is why 12pt converts to exactly 16px, the common body-text size.
What is the difference between em and rem?: rem is relative to the root font size, while em is relative to the element's own font size. This tool uses one base for both for simplicity, so they read the same; set the root font size to model the rem side.
Is the conversion done on a server?: No. The CSS unit conversion runs entirely in your browser with plain arithmetic, so the values you enter stay on your device.

Related tools

CSS Color Converter — Convert between HEX, RGB and HSL with a live swatch.
CSS / SCSS Formatter — Beautify or minify CSS/SCSS/LESS, sort properties and remove duplicates.
Contrast Checker — Check WCAG colour contrast ratio and AA/AAA pass for any two colours.
HTML Formatter — Beautify or minify HTML, format inline CSS/JS, and preview the result.
JS / TS Formatter — Beautify or minify JavaScript, TypeScript and JSX/TSX with Prettier options.