CSS Unit Converter
Convert between px, rem, em, pt, vh, vw, and % simultaneously with configurable base font size and viewport dimensions.
How to use this tool
- 1Enter a value and select the source unit from the From Unit dropdown.
- 2Adjust Base Font Size if your project uses a non-standard root font size.
- 3Adjust Parent/Em Size for em and % conversions.
- 4Set Viewport Width and Height for accurate vw and vh conversions.
- 5All seven unit values update instantly in the grid below.
About CSS Unit Converter
This CSS unit converter shows px, rem, em, pt, vh, vw, and % at once with configurable root font size and viewport dimensions.
Design tokens mix absolute and relative units. One grid prevents the rem/px drift that breaks spacing systems.
Enter a value and select the source unit from the From Unit dropdown. Adjust Base Font Size if your project uses a non-standard root font size. Adjust Parent/Em Size for em and % conversions. Set Viewport Width and Height for accurate vw and vh conversions. All seven unit values update instantly in the grid below. Processing stays in your browser.
Use it when translating Figma px into rem tokens. Set the same root font size your html rule uses.
Rem/em need a correct root/parent assumption. Viewport units depend on the configured viewport. Print units (pt) differ from CSS reference pixels.
Close the tab when you finish so sensitive input is not left in page memory.
Code examples
CSS — common units
/* px → rem (root 16px) */
.text { font-size: 1.5rem; } /* = 24px */
/* px → em (relative to parent) */
.child { font-size: 0.875em; } /* = 14px if parent is 16px */
/* px → vw */
.hero { width: 50vw; } /* 50% of viewport width */JavaScript
const pxToRem = (px, root = 16) => px / root;
const remToPx = (rem, root = 16) => rem * root;
const pxToVw = (px, vw = window.innerWidth) => (px / vw) * 100;Frequently asked questions
Different tools use different definitions and parsers, so small gaps are common. CSS Unit Converter applies deterministic conversion tables and straightforward arithmetic with one consistent browser-side rule set. Hidden characters, stricter syntax, or a different tokenizer usually explain the mismatch. Reduce the input to a minimal sample, then add pieces back until the difference appears. Match the rule your destination actually enforces.
Treat the error as a signal that this environment is stricter or configured differently. Browser APIs reject malformed structures early instead of guessing. Convert to a boring intermediate when it helps—plain UTF-8 text, PNG, WAV, or an unlocked PDF—then retry. If the intermediate works, the original encoding was the problem. Keep that minimal sample for the next regression check.
Runtimes disagree even when feature names match. Locales, parser strictness, codec builds, and library versions differ between your browser and CI. Export the exact bytes from CSS Unit Converter, hash them, and compare in the pipeline. Align normalization steps so both systems see the same input. Use the browser result as a reference artifact, then make CI match it.
Desktop apps win on deep feature sets, batch farms, and specialized hardware paths. CSS Unit Converter wins on zero install, private local processing, and speed for the everyday job on this page. Choose desktop software for multi-hour editorial work or exotic edge formats. Choose this tool when you need a correct result quickly without uploading. Many people do a quick pass here first, then open the heavy suite only if an edge case demands it.
Prefer CSS Unit Converter whenever the input is personal, unpublished, customer-owned, or under NDA, because the core transform stays in your browser via deterministic conversion tables and straightforward arithmetic. Cloud services can still help for formats your browser truly cannot decode, but you must trust their retention policy. Strip secrets before any upload. Privacy is usually the reason to stay local—not a longer marketing checklist.
Start from the best original input you still have. Change only what the destination requires. Prefer lossless intermediates when you must convert twice. Because the tool is local, iterate in small steps: tweak one setting, re-run, compare. Spot-check a short sample before batching anything important.
No account is required for normal use. The core css unit converter transform runs in your browser on your device using deterministic conversion tables and straightforward arithmetic. You get on-screen output, a copy action, or a download without a mandatory ToolBrigade upload for that step. Keep your browser updated. A few lookup utilities may call public reference APIs for live fields only—they still do not need your private documents.
Lighter text, code, calculator, and many image jobs work on modern phones. Large video encodes and huge PDFs are happier on a plugged-in laptop with more RAM. Fully client-side flows can continue offline once scripts are cached; live lookups still need network. If a run seems stuck, try a smaller sample, free memory by closing tabs, and confirm the input is not truncated. Prove the path on a short fixture before blaming the algorithm.
Related Tools
PX to REM Converter
Convert pixel values to REM units (and back) with a configurable root font size.
Color Converter
Enter a HEX color and instantly get the RGB, HSL, and component values side by side.
Length Converter
Convert between mm, cm, m, km, inches, feet, yards, and miles — all values shown at once.