CSS Unit Converter

About CSS unit converter

Converts a CSS length between px, rem, em, pt, pc, in, cm, mm, percent, vw and vh and shows all eleven results in one table. Relative units depend on context, so you can set the root font size, parent font size and viewport size the conversion should assume. It is handy for turning a design spec in pixels into rem values for a stylesheet.

How to use it

1. Enter a number under Value to convert. You can also type a length with its unit, such as 1.5rem, and the unit is picked up.
2. Choose the From unit and set the Precision, from 0 to 10 decimal places, with 4 as the default.
3. Under Conversion context set Root font size, Parent font size, Viewport width and Viewport height, all in pixels, to match your layout.
4. Read the table, where each row shows the unit, the converted value and how that unit is defined.
5. Use the copy button on a row to take a single result.

1.5rem with the default context

Value: 1.5rem
Context: root 16px, parent 16px, viewport 1440 by 900

24px | 1.5rem | 1.5em | 18pt | 1.5pc | 0.25in | 0.635cm | 6.35mm | 150% | 1.6667vw | 2.6667vh

When to use it

• Converting the pixel spacing in a design file into rem for a scalable, accessible layout.
• Checking what 5vw of padding comes to in pixels on a 375 pixel wide phone.
• Turning print measurements in points or millimeters into CSS pixels for a print stylesheet.
• Seeing how em values compound when a component's parent font size is not 16px.

Questions about CSS unit converter

How many pixels are in a point, an inch or a centimeter?

CSS fixes one inch at 96px, so 1pt is 1.3333px, 1pc is 16px and 1cm is about 37.795px. These are CSS reference pixels, not physical screen pixels, so a printed centimeter may differ from the on-screen one.

Why do rem and em give different answers?

rem follows the root html font size and em follows the parent element's font size. With defaults both are 16px, but with a 20px root and a 16px parent, 24px equals 1.2rem and 1.5em.

What does percent convert against?

The parent font size, which matches how percent behaves for font-size. For width or margin, percent refers to the container's width instead, so treat this row as a font-size conversion.

Does the tool read my actual screen size?

No. The viewport starts at 1440 by 900 and changes only when you type new numbers, which keeps results reproducible instead of dependent on the device you happen to be using.

Why do very small results appear in exponent form?

If rounding to your chosen precision would show zero, the value is displayed in exponential notation so it does not pass for an exact zero. Raise the precision to see more digits.

Related tools

• CSS minifierMinify your CSS by removing all the unnecessary characters.
• HTML entity converterEncode or decode HTML entities for any given input.
• BBCode to HTMLConvert forum type bbcode snippets to raw HTML code.
• Unix timestamp converterConvert Unix timestamps to human dates and back with timezone, unit and format control.
• HTML minifierMinify your HTML by removing all the unnecessary characters.
• JS minifierMinify your JS by removing all the unnecessary characters.