CSS Units Converter
Convert px to rem, em, %, pt, pc, in, cm, mm, vw and vh — every CSS length unit at once, free and private in your browser.
Conversion basis
Every CSS unit
= 16 px
| Unit | Converted value | Copy |
|---|---|---|
| px — Pixels | 16px | |
| rem — Root em | 1rem | |
| em — Parent em | 1em | |
| % — Percent of parent | 100% | |
| pt — Points | 12pt | |
| pc — Picas | 1pc | |
| in — Inches | 0.1667in | |
| cm — Centimetres | 0.4233cm | |
| mm — Millimetres | 4.2333mm | |
| vw — Viewport width | 0.8333vw | |
| vh — Viewport height | 1.4815vh |
Every calculation happens in your browser. Nothing you type is uploaded, logged, or stored.
How to Use the CSS Units Converter
- Type the number you want to convert into the value box — for example 24 — and pick the unit it is written in today, such as px, rem, or vw.
- Set the "Root font size" to whatever your html element uses. The browser default is 16px, so 24px becomes 1.5rem; change it to 10 and the same 24px becomes 2.4rem.
- Set the "Parent font size" when you are working in em or %. Those two units are measured against the element's parent, not the document root, which is why they get their own field.
- Adjust the viewport width and height if you are designing for a specific breakpoint. The defaults of 1920 × 1080 match a common desktop screen and drive the vw and vh rows.
- Read the results table — all eleven units update instantly — and press "Copy" on any row to put a ready-to-paste value such as 1.5rem on your clipboard.
What Is a CSS Units Converter?
A CSS units converter translates a single measurement into every length unit the CSS specification supports, so you never have to do the arithmetic by hand. The most common request by far is px to rem: designers hand over pixel values from Figma, while accessible stylesheets are written in rem so the layout scales when a visitor changes their browser font size. This tool does that conversion — and the ten others — in one pass.
The maths is anchored to the CSS reference pixel. One inch equals 96px, one point equals 96/72 px, one pica equals 16px, one centimetre equals 96/2.54 px, and one millimetre equals 96/25.4 px. The relative units depend on context: rem multiplies by the root font size, em and % multiply by the parent font size, and vw and vh are percentages of the viewport. Because those four values are editable here, you get numbers that match your real project rather than a generic assumption.
Every result is rounded to four decimals and stripped of trailing zeros, so 1.5000rem is shown simply as 1.5rem. If you also work with physical measurements or non-CSS quantities, the unit converter handles length, weight, and temperature, the online ruler shows true-to-size centimetres and inches on screen, and the color converter does the same job for HEX, RGB, and HSL values.
Frequently Asked Questions (FAQ)
How do I convert px to rem?
Divide the pixel value by the root font size. With the browser default of 16px, 24px ÷ 16 = 1.5rem and 12px ÷ 16 = 0.75rem. Enter the pixel value above, leave the root font size at 16, and the rem row gives you the answer immediately.
How do I convert rem to px?
Multiply the rem value by the root font size, so 2rem × 16 = 32px. Select rem in the "From unit" dropdown and read the px row. If your stylesheet sets html { font-size: 62.5% }, change the root font size to 10 first.
What is the difference between rem and em?
rem is always measured against the root (html) font size, while em is measured against the font size of the element's parent. That makes em compound when you nest elements, which is why this converter keeps root and parent font size as two separate inputs.
How many pixels is 1pt in CSS?
In CSS, 1pt equals 96/72 px, which is exactly 1.3333px. So 12pt renders as 16px and 9pt renders as 12px. Points come from print typography and are still common in email templates and PDF-style layouts.
How do I convert vw to px?
Multiply the vw value by the viewport width and divide by 100, so 50vw on a 1920px-wide screen is 960px. Change the viewport width field to your target breakpoint — 1440, 1280, or 390 for a phone — and the px row updates instantly.
Should I use px or rem for font sizes?
Use rem for font sizes and spacing so the design respects the visitor's browser font-size preference, which is an accessibility win. px is still fine for hairline borders, shadows, and anything that must not scale.
Why does the percent value change when I edit the parent font size?
Percentages for font-size and em-based spacing are resolved against the parent element, not the root. If the parent is 20px then 1em is 20px and 100% is 20px, which is why editing that field moves both the em and % rows.
Is this CSS unit converter free and private?
Yes. The converter is free, requires no signup, and runs entirely as client-side JavaScript. Nothing you type is uploaded to a server, logged, or shared with anyone.
Tips for Converting CSS Units
- Tip 1: Keep a mental shortcut for the 16px default: 8px = 0.5rem, 16px = 1rem, 24px = 1.5rem, 32px = 2rem. Anything else, let the table do it.
- Tip 2: If your project sets html { font-size: 62.5% } to make 1rem equal 10px, change the root font size field to 10 before you copy anything — otherwise every rem value will be 60% too small.
- Tip 3: Avoid vw for body text. A value that reads well at 1920px becomes unreadable at 360px, so prefer clamp() with a rem minimum and check both viewport widths in the fields above.
- Tip 4: Building a design system? Pair this page with the online ruler to sanity-check physical sizes, and with the number base converter when you need to read the hexadecimal values behind your colour tokens.