A precise rem to px converter, calculated against a root font size you control, built for debugging a mismatched base and reviewing specs.
Free · no account · nothing leaves your browser
The tool
This tool takes any CSS, a single value, a full block of rules, and finds every number followed by 'rem', converting it to the equivalent value in 'px' by multiplying against the root font size specified. Everything else in the text, selectors, property names, colors, other units, is left untouched.
The conversion runs entirely in JavaScript in your browser. There is no request sent to a server, and no run limit, since nothing here costs anything to serve.
Why this direction matters
A stylesheet authored in rem is the correct implementation choice for scaling with a user's settings, but most people do not 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 examining a rendered page and asking whether an element is 24px needs a quick way to translate the rem value in the stylesheet back into the figure actually being compared against.
Performing that multiplication by hand across a dozen values on a spec is slow and error-prone. This tool performs the entire conversion at once.
How it works
One additional 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 becomes a specific number of pixels only once multiplied against whatever the root font size actually is. This means the tool's output is only as accurate as the number entered in the root font size field, if that figure doesn't match what the real page's root element is actually set to, the resulting pixel values will not match what actually renders.
This matters most when checking an implementation against a design spec: an incorrect base produces numbers that look plausible while failing to 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 means of inspecting the project or the live page. It assumes 16px, the common browser default, unless a different number is entered in the root font size field.
To find the project's real root font size, check the global CSS for a rule targeting the html element, or inspect the page in the browser's developer tools and read 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 performing 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 differing from the assumed default explains the discrepancy, without performing the multiplication by hand for every value involved.
All answered in full, nothing to click open.
Paste the CSS into the input field, set the root font size if it isn't 16, and press Convert. Every rem value is converted to px in the output.
Yes. No signup, no length cap, no run limit, since the conversion runs on your own device.
No, the conversion runs entirely client side. Nothing is transmitted, stored or logged.
16px, the common browser default. Change it in the root font size field if the project uses a different value.
Check the global CSS for a rule on the html element, or inspect the page in the browser's dev tools and read the computed font-size for html directly.
The root font size entered probably doesn't match the project's real one. A CSS reset or an inherited style can quietly change it without anyone touching the component being checked.
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 needed and every number followed by 'rem' is converted in one pass.
No, selectors, property names, colors, and other units like percentages or viewport units are left exactly as they were.
Yes, the layout adapts to narrow screens.
This converts rem values to px. The px to rem converter performs 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 considerably faster.
Not currently. This is a single-paste, browser-based converter.
Yes, a negative value such as '-0.5rem' converts correctly to its negative px equivalent.
Yes, it scans the entire pasted text for any number followed by 'rem', regardless of its position in the CSS.
No, only the numeric value and unit are replaced. Everything around it, brackets, semicolons, property names, remains 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 the actual rendered page.
Computed locally, no upload, no run limit.
Open the converter