Pixels to REM Converter

How to use

1. 1Pick a direction: Pixels to rem/em for converting CSS or design specs, or Rem/em to pixels for translating tokens back to absolute sizes.
2. 2Set the base font size (default 16 px). Use a preset for 16 px (browser default), 14 px (compact UIs), 18 px (comfortable reading), or 10 px (62.5% root trick), or type any value from 1 to 100 px.
3. 3Choose the output unit: rem (relative to the root element) or em (relative to the parent). The math uses the same base in both cases.
4. 4In Single value mode, type a number to see the conversion, the formula, and a copy-ready CSS declaration.
5. 5Switch to Batch list mode and paste a column of values to convert many lines at once. Mixed lists with px, rem, and em together are handled per line.
6. 6Use the reference chart on the side to map common pixel values to rem at the current base, or click Copy converted values to grab the full batch.

About this tool

Pixels to REM Converter is a bidirectional CSS unit converter that translates between pixel values and rem or em values entirely in your browser. The conversion direction can be flipped with a single tap (Pixels to rem/em or Rem/em to pixels), and the base font size is fully configurable from 1 to 100 pixels with quick presets for the most common roots: 16 px (the browser default that almost every site inherits), 14 px (for compact dashboards and dense UIs), 18 px (for comfortable reading on content-heavy pages), and 10 px (the popular 62.5 percent root trick that makes 1 rem equal 10 px and rem math trivial). Single-value mode shows the input, the converted output, the formula used, and a copy-ready CSS declaration so you can paste the result straight into a stylesheet or design token file. Batch mode accepts a column of values pasted from a spreadsheet, design system, or framework reference (one per line, up to 200 lines) and returns a parallel column of conversions with per-line stats and a single Copy button to grab the whole list. Mixed input is handled per line: a value ending in px is converted to rem or em, and a value ending in rem or em is converted to px, so a list copied from a Tailwind, Bootstrap, or Material spec converts cleanly without splitting it up first. Numbers can use a comma or a period as the decimal separator (handy for European locales), and unit suffixes are stripped automatically. A built-in reference chart on the side renders the most common pixel values (1, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 96, 112, 128 px) translated into rem at the current base font size so you can map design tokens at a glance. Useful for translating Figma or Sketch specs into CSS, mapping Tailwind spacing scales to rem, scaling type ramps for accessibility (where 1 rem honors the user's preferred font size), porting old pixel-based stylesheets to a modern responsive system, building design system tokens, and any time you need a fast and accurate CSS unit conversion. The math runs entirely on your device, so the values you paste here never leave your browser.

Free to use. Works in your browser. No signup, no login.