PX to REM Converter
Convert pixels to rem using any root font size. Paste a list of values or a whole stylesheet to convert every px value.
Runs in your browserCSS / px → CSS / rem
Loading tool…
Example
.card {
padding: 24px 12px;
font-size: 18px;
border: 1px solid #ddd;
}.card {
padding: 1.5rem 0.75rem;
font-size: 1.125rem;
border: 0.0625rem solid #ddd;
}How to use the PX to REM Converter
- Paste or type your CSS / px into the input area, or open a file from your device.
- Adjust the options above the editor if the tool offers any.
- Review the CSS / rem result, then copy it or download it as a file.
Privacy and limitations
- Your data is processed on your device and is not uploaded to any server.
Frequently asked questions
How is rem calculated?
rem = px ÷ root font size. With the browser default of 16px, 24px is 1.5rem.
Should borders be converted too?
Hairline 1px borders are often kept in px so they never round to zero. Tick "Keep 1px values" to leave them unchanged.
Related converters
PX to EM ConverterConvert pixel values to em relative to a parent font size, for single values or every px in a stylesheet.CSS MinifierMinify CSS by stripping comments and whitespace and dropping redundant semicolons, without touching strings or URLs.REM to PX ConverterConvert rem values to pixels for a given root font size, either as a list or inside pasted CSS.EM to PX ConverterConvert em values to pixels from a parent font size, as a list or inside pasted CSS rules.CSS Gradient GeneratorDesign linear, radial and conic CSS gradients with up to five colour stops, a live preview and copy-ready CSS.CSS Box Shadow GeneratorBuild layered CSS box-shadow values visually with offset, blur, spread, colour, opacity and inset controls.CSS Border Radius GeneratorSet each corner radius in px, % or rem with a live preview and get the shortest border-radius shorthand.CSS to JS Object ConverterConvert CSS declarations or rules into camelCase JavaScript style objects for React, CSS-in-JS or JSON.