How to use
- In Root font size, enter your site's root font size in pixels. The default is 16.
- Open Options and set Precision to the maximum decimal places you want.
- Enter a value in Pixels (px), REM or EM to update the other two fields.
- Click Copy next to the value you want to use.
Examples
Convert a 24px font size
24px
1.5rem (24px ÷ 16px)
Convert card spacing and keep a 1px border
.card {
padding: 24px 16px;
border: 1px solid #ccc;
font-size: 18px;
}.card {
padding: 1.5rem 1rem;
border: 1px solid #ccc;
font-size: 1.125rem;
}Convert rem spacing back to pixels
.product-grid {
gap: 0.75rem 2rem;
margin-bottom: 1.5rem;
}.product-grid {
gap: 12px 32px;
margin-bottom: 24px;
}Tips
- Clean up the converted file with the CSS Formatter.
- Ship it smaller with the CSS Minifier.
FAQ
How do I calculate px to rem?
Divide the pixel value by the root font size: rem = px ÷ root. To convert rem to px, multiply by the root font size. At a 16px root, 1rem equals 16px.
Can I convert em values in a CSS file?
CSS conversion supports only px and rem, not em. For individual em values, set Parent font size for em under Options; the calculation uses em = px ÷ parent font size.
What should I check after converting a CSS file?
Selectors, strings, url() paths, comments and formatting stay unchanged. Check calc() expressions containing 0px: the tool changes 0px to unitless 0, which can make a length calculation invalid. If you enable Convert media queries, remember that rem in media queries uses the browser default font size, not your CSS root font size.
Can I convert a list of pixel values at once?
Use Bulk and enter one value per line; values without a unit are treated as px. The tool converts up to 1,000 non-empty lines and shows px, rem and em columns.
Is my CSS uploaded or saved?
Conversions run in your browser, and your values and CSS are neither uploaded nor saved by the tool. Local storage keeps settings and the last tab; production analytics records usage events without your values or CSS.