CSS Unit Converter (px, rem, em, vw)
Convert CSS lengths between px, rem, em, %, vw, vh, vmin, vmax, pt, pc, in, cm, mm, Q, ch and ex with your own root font size and viewport, see a table of common sizes, and convert every px value in a stylesheet to rem.
How to Use
- Type a value and pick its unit — for example 24 and px. Every other unit appears at once; click a result to copy it.
- Set the root font size (16 unless your
htmlelement changes it), the parent font size used for em, % and ch, and the viewport width and height used for vw, vh, vmin and vmax. - Choose Size table for a ready list of common sizes (10 to 64 px) in rem, em, %, pt and vw, or type your own sizes.
- Choose Batch CSS, paste a stylesheet and convert every px value to rem (or rem back to px). Values under the minimum stay in px, and media queries are left alone unless you tick the box.
- Read Show Work for the formula behind each unit with your numbers in it, then press Copy.
Worked Example
A 24 px heading, root 16, on a 1440 × 900 window. rem = 24 ÷ 16 = 1.5rem. pt = 24 × 0.75 = 18pt. vw = 24 ÷ 1440 × 100 = 1.6667vw, and vh = 24 ÷ 900 × 100 = 2.6667vh. In physical units it is 24 ÷ 96 = 0.25in, which is 0.635cm.
The same stylesheet with a 62.5% root. html { font-size: 62.5% } makes the root 16 × 0.625 = 10 px, so 18 px is 18 ÷ 10 = 1.8rem instead of 1.125rem. Copying 1.125rem from a 16 px project into this one gives 11.25 px text.
Batch, px to rem. In padding: 24px 32px; border: 1px solid #ddd; margin: 0 0 12px the result is padding: 1.5rem 2rem; border: 1px solid #ddd; margin: 0 0 0.75rem — the 1 px border is under the 2 px minimum, so it stays a hairline.
The common mistake: treating em like rem. em multiplies through every parent. A heading set to 1.5em inside a sidebar set to 0.875em is 1.5 × (0.875 × 16) = 1.5 × 14 = 21 px, not the 24 px the designer measured. Set the heading to 1.5rem and it is 24 px wherever it appears; set the Parent font size to 14 here to see the em value you would need (24 ÷ 14 = 1.7143em).
Show Work
Formulas
Where the CSS Units Came From
CSS level 1, a W3C Recommendation in December 1996, already had em, ex, px, in, cm, mm, pt and pc. The relationship between them was loose until CSS 2.1 (2011) defined the reference pixel and fixed 1in at exactly 96px, which is why every absolute unit now converts to px by a constant: 72pt, 6pc, 2.54cm and 25.4mm are all 96px.
CSS Values and Units Level 3 added the units most layouts use today: rem (relative to the root, so sizes stop compounding), the viewport units vw, vh, vmin and vmax, ch, and Q — the quarter-millimetre, taken from Japanese typesetting where type sizes are measured in kyu. Level 4 added small, large and dynamic viewport units (svh, lvh, dvh and their width versions) to deal with mobile browser toolbars that change the viewport height, and they reached all major browsers during 2022.
About This Tool
This converter takes one length to all sixteen CSS length units at once, using your root font size, parent font size and viewport instead of assuming 16 px and a fixed screen. Every value goes through px: first value × px-per-unit, then px ÷ px-per-unit for each target, and Show Work prints both steps with your numbers. The size table lists common sizes against your settings, and batch mode rewrites px as rem (or back) only inside declaration values, leaving selectors, comments, strings, url() and small hairline values alone.
ch and ex use the 0.5em fallback that CSS defines for when the font cannot be measured, so treat them as estimates. Everything runs in your browser; nothing you paste is sent anywhere. Settings can be shared with ?v=24&u=px&root=16&vw=1440.
Related tools: CSS clamp() Generator, CSS Variables Generator, and CSS Grid Generator.
Frequently Asked Questions
How do I convert px to rem?
Divide by the root font size, which is the font-size of the html element and 16 px in every browser by default. 24 px ÷ 16 = 1.5rem, and 14 px ÷ 16 = 0.875rem. If your stylesheet sets html { font-size: 62.5% } the root is 10 px, so 18 px becomes 1.8rem. To go back, multiply: 1.125rem × 16 = 18 px.
What is the difference between rem and em?
rem always refers to the root font size; em refers to the font size of the parent (for font-size) or of the element itself (for padding, margin and width). em compounds when elements nest: a 1.5em heading inside a 0.875em sidebar is 1.5 × (0.875 × 16) = 1.5 × 14 = 21 px, not 24 px. rem gives 24 px wherever the heading sits.
Is a CSS inch a real inch?
Only on paper. CSS fixes 1in at exactly 96px, so 1pt (1/72 in) is 1.3333px, 12pt is 16px, and 1cm is 37.7953px. On a screen the px is a “reference pixel” whose physical size depends on the device and its scaling, so a CSS centimetre on a phone is rarely a measured centimetre. Use in, cm, mm and pt for print stylesheets, where they do come out true.
How are vw, vh, vmin and vmax worked out?
1vw is 1% of the viewport width and 1vh is 1% of its height; vmin uses the smaller side and vmax the larger. On a 1440 × 900 window 24 px is 24 ÷ 1440 × 100 = 1.6667vw, and 1vmin is 9 px. The same 1.6667vw is only 6.25 px on a 375 px phone, which is why vw-only text needs clamp(). On phones 100vh is the height with the browser toolbar hidden; svh and dvh are the small and dynamic versions.
Why are some px values not converted in batch mode?
Three reasons, all on purpose. Values under the minimum (2 px by default) stay in px so border: 1px solid stays a crisp hairline. Media and container query conditions are skipped unless you tick the box, because rem in a media query is always based on the browser default (16 px), not your html font size — with a 10 px root, 48rem in a query is still 768 px. And px inside comments, strings, url() and selectors such as .mt-10px are never touched.
How do I use the CSS Unit Converter (px, rem, em, vw)?
Just type or paste your value. The answer shows up right away — there is no button to press. Change anything and it updates by itself.
Does it cost anything or need an account?
No. The tool is completely free, there is no account to create, and it keeps working offline after the page first loads.
Is anything I type uploaded?
No. The tool works entirely on your device, so the values you enter never leave your browser.
Common Use Cases
Moving a design to rem
Paste a px stylesheet and convert it in one go: padding 24px 32px becomes 1.5rem 2rem, and text then scales with the reader’s font setting.
Reading a design file
A mock-up says 18 px body text and 28 px line height: that is 1.125rem and 1.75rem, or a unitless line-height of 28 ÷ 18 = 1.5556.
Print stylesheets
12pt body text is 16 px, and a 2cm margin is 75.5906 px, so the screen and print versions can be compared in the same unit.
Viewport-based sizing
A 375 px wide phone hero image at 50vw is 187.5 px; the same rule on a 1440 px laptop gives 720 px.
A 62.5% root
With html at 62.5% (10 px), 1.125rem is only 11.25 px — the table shows every common size against your own root so nothing is a guess.
Last updated: