Px to REM/EM Converter — CSS Units Online

What Is a Px to REM/EM Converter?

This tool converts pixel values to the relative CSS units rem and em — and back. All calculations run entirely in your browser using pure JavaScript. Nothing is sent to a server.

How to Use

Single Converter

Set your root font size (default 16px — the browser standard)
Enter a pixel value, or click a breakpoint preset (320, 480, 768, 1024, 1280)
The rem and em equivalents appear immediately
Choose a CSS property, then click Copy snippet to get ready-to-paste CSS

Batch Converter

Paste a list of pixel values separated by commas, spaces, semicolons, or newlines. Click Convert to see all values at once, then Copy CSV to export the results.

Tailwind Reference

Browse the full Tailwind default spacing scale (t-0 to t-96) converted to rem at your configured root font size.

rem vs em: What’s the Difference?

Unit	Relative to	When to use
rem	Root element font size (`html`)	Consistent spacing independent of nesting — typography, layout
em	Parent element font size	Components that should scale with their own context

rem is usually easier to reason about because it always traces back to a single known value. em compounds with nesting: a 1.2em element inside another 1.2em element gives 1.44em effectively — which can be powerful or surprising depending on intent.

Why 16px Is the Default

All major browsers default the root font size to 16px unless overridden. The most common override in CSS:

html { font-size: 62.5%; }  /* 1rem = 10px */

This sets the root to 10px, making rem values easier to calculate mentally (e.g. 24px → 2.4rem). Change the base in this tool to match your project’s root font size.

Tailwind Spacing Scale

Tailwind’s default spacing uses a 4px unit. One spacing step (t-1) equals 4px = 0.25rem at base 16px:

Class	px	rem (base 16)
t-1	4	0.25
t-2	8	0.5
t-4	16	1
t-8	32	2
t-16	64	4
t-96	384	24

Privacy

All calculations run entirely in your browser. No values are ever transmitted to a server.

FAQ

What is the difference between rem and em?

rem (root em) is relative to the root element font size — typically 16px by default in browsers. em is relative to the font size of the parent element. For most layouts, rem is easier to reason about because it always traces back to one known value; em compounds and can be tricky to predict in deeply nested elements.

Why is 16px the default base?

All major browsers default their root font size to 16px unless overridden via CSS (e.g. html { font-size: 62.5%; } sets 10px as the base, making 1rem = 10px). Change the base in this tool to match whatever root font size your project uses.

How do I convert a whole list of pixel values at once?

Use the Batch tab. Paste or type your pixel values separated by commas, spaces, semicolons, or newlines. The tool converts all of them simultaneously and shows the rem and em values in a table you can copy.

What are the Tailwind spacing values in rem?

Tailwind's default spacing scale uses 4px = 1 spacing unit. So t-1 = 4px = 0.25rem, t-4 = 16px = 1rem, t-8 = 32px = 2rem, and t-96 = 384px = 24rem (all at the 16px base). Use the Tailwind Reference tab to browse the full scale.

Px to REM Converter