CSS Unit Converter Online

What Is a CSS Unit Converter?

A CSS unit converter translates a value from one CSS unit to all other supported units simultaneously. This tool supports px, rem, em, vw, vh, pt, and %. Enter a value, select the source unit, and all conversions update instantly. You can customize the base font size (for rem), viewport dimensions (for vw/vh), and parent element size (for em/%).

How to Use CSS Unit Converter

1. Enter a numeric value in the Value field.
2. Select the source unit (px, rem, em, vw, vh, pt, or %).
3. Adjust context settings if needed: base font size, viewport width/height, parent element size.
4. Read the converted values for all units in the results table.

Features

• 7 CSS units — px, rem, em, vw, vh, pt, %
• Configurable context — set base font size, viewport size, and parent element size
• Formula display — see the calculation behind each conversion
• Instant updates — results recalculate as you type
• No dependencies — pure math, runs entirely in your browser

FAQ

What is the difference between rem and em?

rem (root em) is relative to the root element font size (typically 16px). em is relative to the font size of the parent element. rem is more predictable because it always references the same root value.

How do I convert px to rem?

Divide the pixel value by the base font size. For example, 24px ÷ 16px = 1.5rem. If your root font size is different, enter it in the Base Font Size field.

What is vw and vh in CSS?

1vw equals 1% of the viewport width, and 1vh equals 1% of the viewport height. For example, on a 1440px wide screen, 1vw = 14.4px.

How is % different from em?

Both % and em are relative to the parent element size when used for font-size. 1em = 100%. However, for other properties like width, % is relative to the containing block, while em is relative to the element's own font size.