CSS Unit Converter
Convert between CSS units: pixels, rem, em, points and percent, based on a configurable root and parent font size.
Last reviewed by the Radiatus Cloud team
Convert between CSS units (px, rem, em, pt, %) using a configurable base font size.
Need this built for your product?
We design, build & host secure software & APIs.
Convert between CSS units
CSS offers several units for sizing, and converting between them depends on context. This tool converts a value between pixels, rem, em, points and percent, using a configurable root font size and parent font size. A rem is relative to the root element's font size, an em is relative to its parent's font size, points convert to pixels at the standard web ratio of ninety-six pixels per inch, and percent is relative to the parent. Enter a value, set the base sizes, and every equivalent is shown at once.
The default root and parent font sizes are sixteen pixels, the browser default, which you can change to match your design system.
Why unit conversion helps
Modern responsive design favours relative units like rem and em because they scale with user preferences and improve accessibility, but designers often think in pixels. Converting lets you translate a pixel-based mock-up into scalable units, or check what a rem value will render as at the current base size. Points still appear when translating from print designs.
Because em is relative to the parent and rem to the root, the two base-size fields let you model nested contexts accurately. All calculation happens locally in your browser.
Related tools
- JSON Formatter — Format and beautify JSON in your browser. Pinpoints syntax errors by line and column, flags unsafe integers, and never uploads your data to a server.
- JSON Validator — Validate JSON syntax with precise line and column errors, and check documents against a JSON Schema. Runs locally in your browser, nothing uploaded.
- Regex Tester — Test regular expressions against sample text with live match highlighting, capture groups and flag control. Runs entirely in your browser.
- HTML Minifier — Minify HTML by removing comments and redundant whitespace, without breaking inline elements or pre blocks. Runs entirely in your browser.
Frequently Asked Questions
What is the difference between rem and em?
A rem is relative to the root element\'s font size, while an em is relative to its immediate parent\'s font size, so em values compound when elements are nested.
How are points converted to pixels?
Points convert at ninety-six pixels per inch and seventy-two points per inch, so one point equals one and one third pixels on the web.
Why set root and parent font sizes?
rem depends on the root font size and em on the parent, so providing both lets the tool convert accurately for any nesting context.
What is the default base size?
Sixteen pixels, the standard browser default. Change it if your design system uses a different root font size.
Should I use pixels or relative units?
Relative units like rem scale with user settings and aid accessibility, so they are generally preferred for text, while pixels suit fixed details like borders.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Enter a value and unit, set the base font sizes, and see every equivalent.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
JSON Formatter
DeveloperFormat and beautify JSON in your browser. Pinpoints syntax errors by line and column, flags unsafe integers, and never uploads your data to a server.
JSON Validator
DeveloperValidate JSON syntax with precise line and column errors, and check documents against a JSON Schema. Runs locally in your browser, nothing uploaded.
Regex Tester
DeveloperTest regular expressions against sample text with live match highlighting, capture groups and flag control. Runs entirely in your browser.