PX to REM Converter
Convert pixel values to rem and rem to pixels instantly. Configurable base font size, bulk converter, CSS snippet converter, and a handy reference table. Free. No sign-up.
16px ÷ 16 (base) = 1remThe quick brown fox jumps over the lazy dog
How it works
- 1Enter a value
Type a pixel or rem value. The conversion updates instantly as you type.
- 2Set your base size
Pick 14, 16, 18, or 20px as your root font size, or type a custom value. The default browser base is 16px.
- 3Copy or convert CSS
Copy the result, convert values in bulk, or paste an entire CSS snippet to replace all px with rem at once.
Why Convert PX to REM in CSS
Pixels are the unit most developers learn first. They map directly to screen dots and feel predictable. But pixels are absolute units that ignore user preferences. When someone increases their browser's default font size for accessibility reasons, a layout built entirely in pixels does not respond. Text stays small, spacing stays tight, and the experience degrades for the people who need flexibility most.
REM (root em) units solve this by tying every measurement to the root font size of the document. If the browser default is 16px and you set a heading to 2rem, it renders at 32px. If the user bumps their default to 20px, that same heading grows to 40px. Spacing, padding, margins, and media queries expressed in rem all scale together, creating a proportional design that adapts to user settings without any additional code.
The conversion formula is simple: divide the pixel value by the base font size to get rem, or multiply the rem value by the base font size to get pixels. With a 16px base, 24px becomes 1.5rem. With a 10px base (popular with the 62.5% technique), 24px becomes 2.4rem. This tool handles the arithmetic instantly and lets you set any base value your project uses.
The CSS converter tab is especially useful during refactors. Instead of manually replacing each px value in a stylesheet, paste the entire CSS block and get a converted version with one click. The regex-based converter catches values in shorthand properties like padding: 24px 32px and individual declarations alike, saving significant time on large files.
All processing runs in your browser. Your CSS never leaves your device, making this tool safe to use with proprietary stylesheets, unreleased designs, and any code you would rather keep private.