Paste any CSS with rem values and get pixel values back, calculated against a root font size you control. Runs entirely in your browser.
REM to PX
Paste any CSS, a single value, a full block of rules, and this app finds every number followed by 'rem' and converts it to the equivalent value in 'px', multiplying by the root font size you specify. Everything else, selectors, property names, colors, other units, is left untouched.
It's local. The conversion runs in your browser, not on a server, so nothing you paste is uploaded and there's no limit on how much CSS you convert.
Why this direction matters
A stylesheet authored in rem is the right implementation choice for scaling with a user's settings, but most people don't naturally think in rem. A screen ruler, a browser's dev tools inspector panel, and most design handoff tools all report sizes in pixels, so a designer or reviewer eyeballing a rendered page and asking 'is this 24px' needs a quick way to translate the rem value in the stylesheet back into the figure they're actually comparing against.
Doing that multiplication by hand for a dozen values on a spec is slow and error-prone. This app does the whole conversion at once.
Workflow
One extra field for the root font size, otherwise identical to the other converters here.
Why it matters
A rem value has no fixed pixel size of its own, it only becomes a specific number of pixels once multiplied against whatever the root font size actually is. That means this app's output is only as accurate as the number entered in the root font size field, if that doesn't match what the real page's root element is actually set to, the pixel figures produced won't match what actually renders on screen.
This matters most when checking an implementation against a design spec: getting the base wrong produces numbers that look plausible but don't reflect the real page.
A common use
When an element renders noticeably larger or smaller than the design intended, and the CSS is written in rem, the cause is very often a root font size that differs from what everyone assumed. A CSS reset, a third-party widget, or an inherited style from a parent framework can quietly change the html element's font size without anyone touching the component in question.
Converting the rem value in question against both the assumed root size and the page's actual computed root size, checked in the browser's dev tools, quickly confirms whether that mismatch is the real cause.
Straight answer
No, it has no way to inspect your project or your live page. It assumes 16px, the common browser default, unless you enter a different number in the root font size field yourself.
To find your project's real root font size, check your global CSS for a rule targeting the html element, or inspect the page in your browser's developer tools and look at the computed font-size on the html element directly.
Who it's for
Designers checking an implementation against a spec written in pixels use it to translate the rem values in the actual CSS back into the units their design file uses. QA doing a pixel-level visual review uses it the same way, confirming a rendered size matches what was intended before signing off.
Developers debugging an element that renders larger or smaller than expected use it to check whether a root font size that differs from the assumed default explains the discrepancy, without needing to do the multiplication by hand for every value.
Paste your CSS above, set the root font size if it's not 16, and press Convert. Every rem value is converted to px in the output.
Yes, no signup, no paste limit, no run limit. It runs entirely in your browser.
No, the conversion runs on your own device. Nothing is transmitted or stored.
16px, the common browser default. Change it in the root font size field if your project uses something else.
Check your global CSS for a rule on the html element, or inspect the page in your browser's dev tools and look at the computed font-size for html directly.
The root font size entered probably doesn't match your project's real one. A CSS reset or an inherited style can quietly change it without anyone touching the component you're checking.
Only if the root font size is 16px, common but not universal. Some CSS resets set it to a different value, most often 10px.
Yes, paste as much CSS as you want and every number followed by 'rem' gets converted in one pass.
No, selectors, property names, colors, other units like percentages or viewport units, are all left exactly as they were.
Yes, the layout stacks on narrow screens.
This converts rem values to px. The px to rem converter does the reverse, useful when migrating a fixed px design to a fluid, rem-based one.
Rem is the right choice for implementation, but most screen rulers, dev tools and design handoff tools report sizes in pixels, so translating back makes comparison and review much faster.
Not yet, paste, convert, copy for now.
Yes, a negative value like '-0.5rem' converts correctly to its negative px equivalent.
Yes, it scans the whole pasted text for any number followed by 'rem', regardless of where in the CSS it appears.
No, only the numeric value and unit are replaced. Everything around it, brackets, semicolons, property names, stays exactly as written.
Yes, converting a rem value against both the assumed and actual root font size is a fast way to check whether a mismatched base is the cause.
Yes, nothing is transmitted anywhere. Processing happens locally in your browser.
Yes, it converts every occurrence of a number followed by 'rem' in the pasted text, regardless of which property it belongs to.
The conversion still runs, but the resulting px values will be based on the wrong base and won't match your actual rendered page.