PX ↔ REM / EM Converter
Convert pixels to REM and EM and vice versa with configurable base. Reference table with the most common CSS sizes. Essential for web.
Reference table (base 16px)
| px | rem | pt (aprox.) |
|---|
REM vs EM vs PX
px: absolute size, does not scale with user preferences.
rem: relative to the root element (html). Scalable. Recommended for accessible typography.
em: relative to the parent element. Useful for padding and margin proportional to local text.
Convert px to rem and em
Relative units like rem and em make a layout more accessible and easier to scale, which is why they're the way of modern CSS. The catch is that most of us still reason in pixels. This converter closes that distance: type the value in px and get the equivalent in rem and em, or go the other way around.
Since the conversion depends on the base font size, usually 16px, we left that base configurable so the number lines up with what's in your project. There's also a reference table with the most common sizes, good for a quick lookup while you build the stylesheet.
The whole calculation happens in the browser. It serves web developers well when they want to move to relative units without redoing division in their head for every measurement.
Related Tools
CSS Clamp Calculator
Generate CSS clamp() values for fluid typography and spacing. Enter minimum/maximum sizes and viewport widths to get a ready-to-paste clamp() function.
CSS Unit Converter
Convert between px, em, rem, %, pt, vh, vw for common design values — configurable 16 px base. Everything in your browser.
CSS Loader Generator
Create pure-CSS spinners and loaders in 8 styles (ring, dots, pulse, bars, etc.). Adjust color, size and speed. No libs, no GIFs. Everything in your browser.