CSS Unit Converter
Convert CSS lengths such as px, rem, em, %, vw, and vh with the font size and viewport context those units actually use.
CSS unit converter
CSS Unit Converter Quick Answer
A CSS unit converter changes values between CSS length units such as px, rem, em, %, vw, vh, and physical units. Relative units need a context: root font size for rem, parent font size for em, and viewport dimensions for vw/vh. A CSS length converter does not invent a single px equivalent for every percentage.
How to Use the CSS Unit Converter
- Enter a CSS value such as 16px or 1rem.
- Confirm the source unit if you typed a bare number.
- Adjust root font size, parent font size, or viewport settings when the unit is relative.
- Review all equivalent values, or switch to Pair converter for one target.
- Copy a result, a declaration, or the full list.
- Open Live preview to see font-size, padding, or width at a simulated viewport.
CSS Unit Conversion Formulas
- rem = px ÷ root font size
- em = px ÷ parent/current font size
- vw = px ÷ viewport width × 100
- vh = px ÷ viewport height × 100
- vmin = px ÷ min(width, height) × 100
- vmax = px ÷ max(width, height) × 100
- pt = px × 72 ÷ 96
- in = px ÷ 96
- cm = px × 2.54 ÷ 96
- mm = px × 25.4 ÷ 96
- Q = mm × 4
Percentage conversion is property-specific. 50% width is not 50% font-size. CSS px is a reference unit, not automatically a device pixel.
Examples
- 16px → 1rem when the root is 16px.
- 24px → 1.5rem when the root is 16px.
- 32px → 2em when the parent/current font size is 16px.
- 32px → 10vw at a 320px viewport.
- 72px → 5vw at a 1440px viewport.
- 12pt → 16px using the CSS 96px-per-inch reference.
PX to REM Converter
rem = pixels ÷ root font size. At the common 16px root, convert px to rem by dividing by 16. Change the root in the converter if your html font-size is not 16px.
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 64px | 4rem |
REM to PX Converter
px = rem × root font size. 1rem is 16px only while the root stays 16px.
| rem | px |
|---|---|
| 0.5rem | 8px |
| 0.625rem | 10px |
| 0.75rem | 12px |
| 0.875rem | 14px |
| 1rem | 16px |
| 1.125rem | 18px |
| 1.25rem | 20px |
| 1.5rem | 24px |
| 2rem | 32px |
| 2.5rem | 40px |
| 3rem | 48px |
| 4rem | 64px |
PX to EM and EM to PX
em = px ÷ parent/current font size. px = em × that same context. rem and em match only when the parent font size equals the root. Nested em values compound; rem does not.
| px | em |
|---|---|
| 8px | 0.5em |
| 16px | 1em |
| 20px | 1.25em |
| 24px | 1.5em |
| 32px | 2em |
PX to VW and VW to PX
vw = px ÷ viewport width × 100. px = vw ÷ 100 × viewport width. 10vw is 144px at 1440px wide and 39px at 390px wide. 5vw at 390px is 19.5px. Use Pair converter when you only need px → vw.
| Viewport width | 10vw |
|---|---|
| 320px | 32px |
| 375px | 37.5px |
| 390px | 39px |
| 768px | 76.8px |
| 1024px | 102.4px |
| 1280px | 128px |
| 1440px | 144px |
PX to VH and VH to PX
vh uses viewport height. 50vh at 800px tall is 400px. Do not use width when the unit is vh.
CSS Units Reference
| Unit | Category | Relative to | Common use |
|---|---|---|---|
| px | Reference | CSS pixel | Borders, hairlines |
| rem | Font-relative | Root font size | Type and spacing |
| em | Font-relative | Parent font context | Component sizing |
| % | Context | Property-specific | Flexible boxes |
| vw / vh | Viewport | Width / height | Fluid layout |
| vmin / vmax | Viewport | Min / max dimension | Responsive effects |
| svh / lvh / dvh | Viewport | Small / large / dynamic height | Mobile chrome |
| in / pt / cm | Physical | 96px per inch | Print / design export |
rem vs em
rem is root-relative. em is context-relative. Neither is always better — rem keeps a scale stable; em can scale a whole component when the parent font size changes.
| rem | em | |
|---|---|---|
| Relative to | Root font size | Parent / current font context |
| Typical use | Type scales and page spacing | Component-local padding and type |
| Scaling | Changes with the root only | Compounds when nested |
| Main advantage | Predictable tokens | A component can scale as one unit |
| Potential issue | Ignores local font-size unless you intend that | Nested 1.2em × 1.2em grows faster than expected |
px vs rem
px is a CSS reference length. It is useful for 1px borders and hairlines. rem follows the root font size, so typography and spacing can scale with user or theme settings. A CSS font size converter should not claim one is universally correct — use px when the size must stay fixed, rem when the scale should move with the root.
vw, vh, svh, lvh, and dvh
vw and vh use the classic viewport. svh is the small viewport (browser chrome visible). lvh is the large viewport (chrome hidden). dvh tracks the dynamic viewport as chrome shows and hides. On mobile, 100vh can overflow the visible area; 100dvh often matches the current height more closely. They are not identical, so pick the unit that matches the layout job.
Physical CSS units
in, cm, mm, Q, pt, and pc use the CSS reference of 96px per inch. 12pt equals 16px. 1pc equals 12pt. Q is a quarter-millimeter. These help when a design or print file exports inches or points. They should not dominate a screen stylesheet.
Why CSS percentage conversion depends on context
50% width uses the containing-block width. 50% font-size uses the parent font size. Percentage margin and padding, including top and bottom, also use containing-block width. This tool asks for a property context instead of inventing one px value.
When to Use a CSS Unit Converter
- Convert Figma or other design px values into rem or em
- Build an accessible typography scale
- Check viewport-based widths before a responsive pass
- Translate print or design-tool measurements
- Migrate a pixel stylesheet toward tokens
For fluid min/max type that changes with the viewport, use the CSS Clamp Calculator after you know the endpoint units. That is a different job from converting a single length.
Convert px, rem, em, vw, and vh
Pair converter is the shortest path for convert px to rem, rem to px, px to em, em to px, px to vw, vw to px, px to vh, or vh to px. All units mode is the CSS units converter view when you want the full table, including a CSS viewport unit converter and print units such as pt and cm.
Common mistakes
- Assuming 1rem is always 16px.
- Treating em and rem as the same unit.
- Converting % without a CSS property context.
- Using viewport width for a vh value.
- Treating 100vh as a reliable mobile full-screen height.
- Ignoring svh, lvh, and dvh on mobile chrome.
- Rounding too early, then comparing the rounded leftovers.
- Confusing CSS px with physical device pixels.
- Using pt on screen without the 96px-per-inch reference.
- Copying a converted value without checking it in the target layout.
Frequently asked questions
What is a CSS unit converter?
It converts one CSS length into other units using the context those units require — root font size, parent font size, viewport size, or a percentage reference.
How do I convert px to rem?
Divide pixels by the root font size. At 16px root, 24px is 1.5rem. Change the root if html { font-size } is not 16px.
How do I convert rem to px?
Multiply rem by the root font size. 1.25rem × 16 = 20px.
How do I convert px to em?
Divide pixels by the parent or current font size, not automatically by the root.
How do I convert em to px?
Multiply em by that same parent/current font size.
How do I convert px to vw?
vw = px ÷ viewport width × 100. 144px is 10vw on a 1440px-wide viewport.
How do I convert px to vh?
vh = px ÷ viewport height × 100. Use height, not width.
What is the default rem size?
Browsers typically use a 16px initial font size, so 1rem is often 16px until you change the root.
What is the difference between em and rem?
rem is relative to the root. em is relative to the element’s font-size context and can compound in nested components.
Can CSS percentages be converted to pixels?
Only with a property context. 50% width uses the containing-block width. 50% font-size uses the parent font size. This tool will say context required instead of guessing.
What is 1rem in pixels?
1rem equals the root font size. That is 16px at the common default, or 18px if you set the root to 18px.
What is 1em in pixels?
1em equals the parent or current font size used as context. It is not locked to 16px.
What is 1vw in pixels?
1vw is 1% of the viewport width. On 1440px that is 14.4px. On 390px it is 3.9px.
What is the difference between vw and vh?
vw is a percentage of viewport width. vh is a percentage of viewport height.
What are svh, lvh and dvh?
They are modern viewport-height units. svh is the small viewport, lvh the large viewport, and dvh the dynamic viewport that tracks mobile browser chrome.
What are vmin and vmax?
vmin is 1% of the smaller viewport dimension. vmax is 1% of the larger one.
Can I use this CSS converter for print units?
Yes. in, cm, mm, Q, pt, and pc use the CSS reference of 96px per inch. That is a CSS reference, not a measured printer DPI.
Does this CSS Unit Converter work on mobile?
Yes. Results stack as cards on small screens. You can also load the current viewport.
Is the calculation performed in the browser?
Yes. Values stay on your device during normal use and are not uploaded.