Convert pixel values to rem, em and percent — and back — with a configurable root font size. Bulk mode converts an entire stylesheet in one click.
Paste a stylesheet — every px value becomes rem, comments and structure preserved.
px is absolute; rem and em are relative — and that's the whole story. px is a fixed CSS pixel, identical on every device and every user setting. rem is relative to the root font size (html, default 16px): 1rem = 16px, 2.5rem = 40px. em is relative to the current element's font size — and this is where the classic bug lives: an element with font-size: 1.2em inside a parent with font-size: 1.2em compounds to 1.44em, not 1.2em. Nested ems multiply.
Why the industry moved to rem. Two reasons. First, accessibility: when a user raises their browser's default font size (a WCAG-friendly behavior), rem-based text and spacing scale proportionally, while px values stay frozen — hard-coded px text is a real accessibility failure. Second, maintainability: with rem, changing one root value resizes the entire design system. Tailwind's default scale and most 2026 design systems are rem-based for exactly this reason.
When em is actually right. For properties that should scale with the element's own font size: padding and border-radius on buttons (a 1em padding button scales with its font), icon sizing, and margin spacing around text. The rule: rem for layout scale, em for component-relative scale, px for 1px borders and hairline details. A 1px border should never be rem (0.0625rem is nonsense); a 16px gap should never be px if you care about accessibility.
The 10px root trap. Some systems set html { font-size: 62.5% } so 1rem = 10px and the math is easy. This is an anti-pattern: 62.5% overrides the user's browser default (16px → 10px), breaking browser-zoom accessibility. If you want a 10px mental model, use html { font-size: 10px } — still an override, but explicit. The default 16px with divide-by-16 math (this tool's default) is the safe choice.
line-height is a special case. A px line-height converts cleanly to rem (16px → 1rem). But the modern best practice is unitless line-height (line-height: 1.5), which is relative to the element's own font size and doesn't need conversion at all. Don't blindly bulk-convert unitless values — this tool only touches px, which is the safe rule.
See also: CSS Unit Converter · CSS Animation Generator · CSS Grid Generator · Flexbox Generator · All CSS Tools