Skip to main content

CSS Unit Converter

Loading…

About CSS Unit Converter

The CSS Unit Converter is a free online tool that converts between all major CSS length units instantly. Type any value and see the equivalent in px, rem, em, pt, pica, cm, mm, inches, vw, vh, and percentage — all at once.

CSS supports a wide range of length units, and switching between them manually can be error-prone. Designers and developers often need to convert pixel values to rem for scalable typography, em for component-relative spacing, or physical units like cm and mm for print stylesheets.

The converter handles both absolute units (px, pt, pc, cm, mm, in) and relative units (rem, em, %, vw, vh). Relative units depend on context — rem is relative to the root font size (typically 16px), em is relative to the parent element's font size, and percentage is relative to the parent element's computed size. The Context settings panel lets you customise these values to match your project.

Viewport units (vw, vh) are calculated relative to a 1920×1080 reference resolution. For other viewport sizes, adjust the settings or use the result as a starting point.

Everything runs in your browser. No data is sent to a server and no sign-up is required.

How to Use CSS Unit Converter

  1. Type the value you want to convert in the input field.

  2. Select the source unit from the dropdown (e.g. px, rem, em).

  3. All target unit values update instantly in the results panel.

  4. Click any result row to use it as the new input, or click Copy to grab the value with its unit.

  5. Open Context settings to set a custom root font size or parent element size for accurate rem, em, and % conversions.

Examples

Example — px → rem (16px base)
Input
16px
Output
1rem
Example — rem → px
Input
1.5rem
Output
24px
Example — px → pt
Input
16px
Output
12pt
Example — px → em (parent 16px)
Input
24px
Output
1.5em
Example — cm → px
Input
1cm
Output
≈ 37.8px
Example — vw → px (1920 ref)
Input
10vw
Output
192px

Frequently Asked Questions

What is the difference between px, rem, and em?

px (pixel) is an absolute unit — 1px equals one CSS pixel regardless of context. rem (root em) is relative to the root element's font size, which is typically 16px in browsers. em is relative to the font size of the element's parent. rem is generally preferred for typography and spacing in modern CSS because it scales consistently with the user's browser font size preference.

What root font size should I use?

The default browser root font size is 16px, which is what most CSS frameworks use as their rem base. Some projects set the root to 10px (using html { font-size: 62.5%; }) so that 1rem = 10px, making mental math easier. Enter your project's actual root font size in the Context settings panel.

How are vw and vh calculated?

vw (viewport width) and vh (viewport height) are percentages of the browser viewport dimensions. This tool uses 1920×1080 as the reference resolution, so 1vw ≈ 19.2px and 1vh ≈ 10.8px. For other resolutions, the conversion is proportional — 1vw on a 1440px-wide viewport would be 14.4px.

What is a pt (point) in CSS?

A CSS point is a physical unit equal to 1/72 of an inch, which is 1.333…px at 96 DPI (the CSS reference pixel density). Points are mainly used in print stylesheets. For screen design, px or rem is more appropriate.

What is a pica (pc) in CSS?

A CSS pica equals 12 points, or 1/6 of an inch, which is 16px at 96 DPI. Like points, picas are primarily used in print media contexts and are uncommon in web screen design.

How does percentage (%) work?

In CSS, percentage values are relative to the parent element's computed value for the same property. For font-size, 100% equals the parent's font size. For width, 100% equals the parent's content width. Set the parent element size in Context settings to get the correct result for your layout.

Why does 1rem equal 16px by default?

All major browsers set the default root font size to 16px unless overridden by the user or stylesheet. This means 1rem = 16px, 0.875rem = 14px, 1.25rem = 20px, and so on. Changing the root font size (e.g. with html { font-size: 18px; }) shifts all rem values proportionally.

Can I use this for print stylesheets?

Yes — the converter includes pt (points), pc (picas), cm (centimetres), mm (millimetres), and in (inches), which are all physical units used in CSS print media queries. Note that physical units are only accurate in print contexts; on screens they map to fixed pixel equivalents at 96 DPI.