How to use it
- Type a size in Value and choose a direction under Convert, for example px to rem.
- Check the Base font size (px). Use the size your site sets on the root element; 16 px is the browser default.
- Paste CSS into CSS to convert and choose Convert CSS px to rem or em.
- Copy the CSS with converted lengths, or check a size in the Conversion table.
How px, rem and em relate
A px is an absolute length on the screen. A rem is a multiple of the font size of the root element (the html element), and an em is a multiple of the font size of the element where it is used. Both units follow the base font size, so if the base is 16 px, 1 rem is 16 px.
To convert px to rem, divide by the base. To convert rem or em back to px, multiply by the base. With the same base size, rem and em give the same number; they differ only when the font size of a parent element is not the base.
rem = px / base font size; px = rem x base font sizeWhat the CSS converter changes and what it does not
Every number followed by px is converted, including negative values and decimals such as .5px. Numbers are written with a point, as CSS requires, at most four decimals and no trailing zeros. A zero length becomes 0 without a unit, which CSS accepts.
The converter does not look at the meaning of the CSS. A px value inside a comment or a string, such as content with the text 10px, is converted as well. The contents of url() are left alone, so a file name that ends in px is not changed. Check the result before you use it.
- Use rem for font sizes, spacing and widths that should grow when a visitor changes the text size.
- Keep 1 px for hairline borders, where a rem value would round to a blurred line on some screens.
Worked example: body text of 18 px on a base of 16 px
18 divided by 16 is 1.125, so font-size: 18px becomes font-size: 1.125rem. A margin of 40 px becomes 2.5rem, because 40 divided by 16 is 2.5.
The same 24 px on a base of 10 px is 2.4 rem, and the table shows 24 px as 1.5 rem when the base is 16 px. The CSS snippet of the default example has six px lengths; all six are converted and the count shows 6.
Frequently asked questions
Why is 16 px the base font size?
Most browsers use 16 px as the default font size of the root element, so 1 rem is 16 px unless the site sets another size. Enter the value your site sets on the html element.
What is the difference between rem and em?
rem is based on the font size of the root element, so it is the same everywhere on the page. em is based on the font size of the element where it is used, so the size changes when elements are nested. With the same base the numbers are equal.
Should I convert every px value to rem?
Not always. A 1 px border is sharper in px on many screens, and some small details look better fixed. Use rem for text sizes, spacing and layout widths that should scale with the visitor's settings.
Why are some px values in my CSS not converted?
A px value is converted only when it stands on its own as a length. Values inside url(), and text such as 10pxx or 10px-2 that is not a plain length, are left as they are. Check any unusual value by hand.
Why does the table stop at 64 px?
It lists the sizes that designers use most often. For any other size, type it into the Value box and choose the direction.
Sources
Figures and text last checked on Tuesday, November 10, 2026.