What does this tool do?
The CSS Unit Converter turns a pixel value into rem, em, pt, %, vw, and vh all at once. Because you supply the references yourself, such as the root font size, parent font size, and viewport width, the results are calculated against your project's real context. It's handy for developers working on responsive layouts and accessible typography.
How to use it
- Paste or type your data into the left field.
- The result is generated instantly on the right.
- Use the Copy button to grab the output.
How the units are calculated
rem is pixels divided by the root font size, and em is pixels divided by the parent font size. pt is the pixel value multiplied by 0.75. The percentage is a ratio relative to the parent. vw is based on the viewport width, while vh is derived from a viewport height assumed at a 16:9 ratio. For that reason the vh result is an approximation; use your real viewport height for an exact value. Every result is shown trimmed of trailing zeros.
When it's useful
Use it to convert a designer's pixel measurements into rem for scalable, accessible typography; to tie component spacing to a parent with em; or to size full-bleed hero sections with vw and vh. Click any result tile to copy the value with its unit to the clipboard and paste it straight into your stylesheet. Change any of the reference fields and all conversions update instantly.
Frequently asked questions
Why is the vh result sometimes different from what I expect?
The tool doesn't ask for viewport height directly, so it derives one from the width assuming a 16:9 aspect ratio. If your screen ratio differs, the vh result is approximate; rely on your actual viewport height for a precise figure.
What's the difference between rem and em?
rem is always calculated against the root (html) font size, so it's constant. em depends on the nearest parent's font size and can compound across nested elements. The tool computes each from its own reference field.
How do I copy a result?
Just click any result tile; the value is copied to the clipboard with its unit (for example '1rem') and is ready to paste directly into your CSS.
Is CSS Unit Converter free?
Yes. CSS Unit Converter and all 300+ tools on MagmaNex are completely free with no signup or account required.
Is my data safe?
Yes. Everything runs locally in your browser. The data you enter is never sent to a server, stored, or shared.
Does it work on mobile?
Yes. CSS Unit Converter works on phones, tablets and desktops — no app download needed.
🔒 Privacy: everything runs in your browser, your data is never sent to a server.