DevTools Logo

Px to Rem

Px to Rem Converter

Convert pixels ↔ REM with a custom root size, bulk CSS lines, and copy-ready snippets.

Default is usually 16px (1rem). Tailwind and most browsers use this.

Examples

Convert 32px with the default base

Input
Base: 16px
Pixels: 32px
Output
Base: 16px
Pixels: 32.00 px
REM: 2.0000 rem

The default 16px base makes 32px equal to 2rem.

Convert a fractional pixel value

Input
Base: 16px
Pixels: 8.5px
Output
Base: 16px
Pixels: 8.50 px
REM: 0.5313 rem

The converter keeps the fractional input and formats the calculated REM result to four decimal places.

Use a 10px base for a compact scale

Input
Base: 10px
Pixels: 24px
Output
Base: 10px
Pixels: 24.00 px
REM: 2.4000 rem

Changing the base changes the relationship: 24px is 2.4rem when the base is 10px.

About this tool

The Px to Rem Converter applies the CSS relationship REM = Pixels / Base Size. Enter a value in either direction and the other field updates immediately, making it easy to translate a pixel-based design measurement into a root-relative CSS length.

The default base is 16px, but the tool lets you use any positive base size. Pixel values display with two decimal places and REM values with four, while the quick-reference buttons cover common 16px conversions from 12px through 48px. Invalid numeric input resets both values to zero, and a non-positive base size is ignored.

The converter runs entirely in the browser and includes copy buttons plus keyboard shortcuts: Ctrl/Cmd+C copies the Pixels value and Ctrl/Cmd+Shift+C copies the REM value. Use the result in CSS tokens, spacing scales, typography or component dimensions where root-relative sizing is useful.

How to use

  1. Set the base size

    Enter the root font-size you are designing against. The default is 16px, and only positive base values are accepted.

  2. Convert pixels to REM

    Type a pixel value or click a quick-reference button. The REM field is calculated as pixels divided by the base size.

  3. Convert REM to pixels

    Type a REM value in the right field. The Pixels field is calculated as REM multiplied by the base size.

  4. Copy the value

    Use the copy button beside either field, or press Ctrl/Cmd+C for Pixels and Ctrl/Cmd+Shift+C for REM.

Use cases

Translating a design handoff

Convert measurements from a pixel-based design file into REM values before adding them to a typography or spacing token file.

Building a responsive type scale

Compare the same pixel sizes against different base font sizes to see how a root-relative scale changes across projects.

Checking an existing CSS declaration

Paste the base and pixel value from a stylesheet to confirm the equivalent REM value without doing the division manually.

Creating accessible component dimensions

Use REM for text, spacing and layout values that should respond to the document's root font-size rather than remain fixed in pixels.

Common mistakes

Mistake:Using the viewport width or a browser zoom percentage as the base size.

Fix:The base size is the root font-size used by the CSS rem unit, commonly 16px. Set it to the actual root value for the stylesheet you are editing.

Mistake:Entering zero or a negative base and expecting a conversion.

Fix:The component only updates the base when the value is greater than zero. Restore a positive base size before converting.

Mistake:Treating the displayed decimals as the internal calculation limit.

Fix:Pixels are displayed to two decimals and REM to four, so use the underlying input values when you need more precision than the visible formatting shows.

Mistake:Typing a non-numeric value and assuming the previous result remains visible.

Fix:The component treats an unparsable pixel or REM value as invalid and sets both values to zero; enter a numeric value to resume the conversion.

Frequently asked questions

Related guides

Pixel to REM Conversion and Accessible Fluid Typography in CSS

Why using rem units improves web accessibility, how root font scaling works, and formulas for CSS clamp() fluid typography.

References & standards

Related tools

Aspect Ratio Calculator

Calculate dimensions and ratios for images and videos.

Border Radius Generator

Visually craft CSS border-radius values — including the advanced 8-value slash syntax for organic blob shapes — with a live preview and one-click copy.

Box Shadow Generator

Visual CSS box-shadow generator. Create beautiful shadows with live preview and copy the CSS code.

CSS Grid Generator

Visually build CSS Grid layouts — set columns, rows and gaps, see a live preview, and copy production-ready grid-template CSS.

Cubic Bezier / Easing Generator

Build a CSS cubic-bezier() timing function visually — drag control points, preview common presets, see the easing curve live, and copy the transition-timing-function CSS.

Dummy Avatar Generator

Generate unique SVG avatars for mockups and placeholders using various illustration styles