Why convert px to rem?
A rem ("root em") is a CSS length equal to the computed font-size of the root <html> element. With the browser default of 16px, 1rem is 16px, 1.5rem is 24px and 0.75rem is 12px. The formula is simply rem = px ÷ root font size.
The reason to write sizes in rem instead of px is accessibility. When someone raises the default font size in their browser settings — common for people with low vision — every rem-based font size, padding and gap scales with it. Pixel values ignore that preference and stay fixed, so text can remain too small while the rest of the page refuses to adapt.
Most design files are still specified in pixels, so the conversion is a daily chore. This converter does it both ways as you type, shows a reference chart for the base you choose, and can rewrite an entire stylesheet in one go while leaving comments, URLs, 1px borders and media queries alone.
How to use the PX to REM Converter
- Set the root font size. Leave it at 16px unless your project changes the
font-sizeofhtml(for example the 62.5% technique, which makes it 10px). - Type a pixel value in the PX field — the REM field updates instantly. You can also type in the REM field to go the other way, or enter several values like
8 16 24for a shorthand. - Use the chart for quick lookups and copy any row with its button.
- To convert a whole file, paste your CSS into Bulk convert CSS, choose whether to keep 1px values and media queries, then copy or download the result.
Example
A card styled from a pixel-based design, converted with a 16px root:
/* Before */
.card {
padding: 24px 32px;
font-size: 18px;
border: 1px solid #e5e7eb;
}
/* After */
.card {
padding: 1.5rem 2rem;
font-size: 1.125rem;
border: 1px solid #e5e7eb;
}PX to REM formula
Divide the pixel value by the root font size: rem = px / root. With a 16px root, 20px ÷ 16 = 1.25rem. With a 10px root, the same 20px becomes 2rem. To go back, multiply instead — see the REM to PX Converter.
What to keep in pixels
1pxborders, outlines and dividers: they should stay crisp at every zoom level, which is why the bulk converter skips them by default.- Media query breakpoints: rem and em in
@mediaconditions are always based on the browser default size, never on thehtmlfont size you set, so converting them with a non-16 base changes your breakpoints. - Box shadows and very small decorative offsets, where scaling with text size has no benefit.
- For sizes that should grow smoothly between breakpoints, combine rem with viewport units using the CSS Clamp Generator.
Frequently Asked Questions
How many pixels is 1rem?
1rem equals the computed font size of the html element. In every major browser that is 16px by default, but it changes if your CSS sets html { font-size: … } or the user picks a larger default font size in their browser settings.
Should I use the 62.5% trick?
Setting html { font-size: 62.5%; } makes 1rem equal 10px, so 24px is 2.4rem — easy mental math. It still respects user preferences because it is a percentage. The downside is that you must reset body text to 1.6rem and third-party components that assume 16px will render smaller. Enter 10 as the root size here to convert for that setup.
Is rem better than em?
They solve different problems. Rem is always relative to the root, so it is predictable everywhere. Em is relative to the current element’s font size, which compounds when nested but is ideal for padding that should scale with a button’s own text. The PX to EM Converter explains the difference with a nested example.
How precise should rem values be?
Four decimals are more than enough: browsers lay out on fractions of a pixel, and 0.0625rem (1px at 16px) is the smallest step most designs need. Lower precision such as two decimals can introduce visible rounding of up to a fraction of a pixel per value.
Does the bulk converter change my selectors or comments?
No. It only rewrites numbers directly followed by px. Comments, quoted strings and url() contents are protected, and names such as .mt-10px are left untouched because the value must not be part of an identifier.