CSS Unit Converter
Enter a value and select units to convert. Adjust advanced settings for 'em', 'rem', 'vw', 'vh', and '%' calculations.
| From | To | Formula |
|---|---|---|
| px | rem | px ÷ rootFontSize |
| px | em | px ÷ parentFontSize |
| px | vw | (px ÷ viewportWidth) × 100 |
| px | vh | (px ÷ viewportHeight) × 100 |
| px | % | (px ÷ parentFontSize) × 100 |
px (Pixels): Pixels; an absolute unit relative to the viewing device.
em: Relative to the font-size of the parent element.
rem: Relative to the font-size of the root (html) element.
vw/vh: 1% of the viewport width.
%: Relative to the parent element's value for the same property (e.g., font-size of parent for font-size conversion).
pt (Points): Points; an absolute unit (1pt = 1/72 of an inch).
in, cm, mm: Inches; an absolute unit (1in = 96px)., Centimeters; an absolute unit (1cm ≈ 37.8px)., Millimeters; an absolute unit (1mm = 1/10th of a centimeter).
How to use CSS Unit Converter
- 1
Enter a value and units
Type the number you want to convert, then pick the From unit and the To unit, such as px to rem.
- 2
Set advanced context
For relative units, open Advanced Settings to set the root font size, parent font size, and viewport width and height used in the math.
- 3
Convert
Click Convert to calculate the equivalent value, or use Swap to reverse the From and To units.
- 4
Copy the result
Use Copy Result to grab the converted value for your stylesheet.
Frequently asked questions
Which CSS units can it convert between?
Why do em, rem, and viewport conversions need extra settings?
What base font size does it assume?
How accurate are the absolute unit conversions?
Is the converter free and run locally?
Related tools
Keep going with these handy tools