CSS Units Converter
Convert between any CSS length units with precision including px, em, rem, vh, vw, %, cm, mm, in, pt, and pc units. Perfect for responsive design and cross-browser compatibility with real-time preview and calculation history.
Complete Guide: CSS Units Converter
Everything you need to know about using this tool effectively
The CSS Units Converter transforms values between CSS length units. You enter a value in one unit (like 16px) and see the equivalent in every other supported unit (em, rem, vh, vw, cm, mm, in, pt, pc). The base font size setting (default 16px) controls how em and rem are calculated. All conversion happens in the browser in real time.
This tool applies standard CSS unit conversion math. Pixels are the base unit. Viewport units (vh, vw) assume a 1920x1080 reference viewport. Physical units (cm, mm, in, pt, pc) use the CSS standard 96 DPI ratio. em and rem are calculated relative to the base font size you set.
Converting pixel values to rem for responsive design
Enter a pixel value like 24px and see the rem equivalent based on your base font size.
Creating print stylesheets
Convert screen pixel dimensions to physical units (cm, mm, in) for print media queries.
Building a typography scale
Convert a series of pixel sizes to rem values for a consistent, scalable type system.
Using viewport units for responsive layouts
Convert a pixel height to vh units for full-screen hero sections or responsive containers.
Enter a value
Type a number and select the source unit from the dropdown.
Set base font size
Adjust the base font size if your project uses something other than 16px.
View all conversions
The tool shows the equivalent value in every supported unit.
Copy a value
Click the copy button next to the unit you need.
1rem equals 16px by default. Change the base font size if your project differs.
Use rem for typography and spacing to respect user font preferences.
Viewport units (vh, vw) are relative to the browser window, not the parent container.
Physical units (cm, mm, in) are best for print stylesheets, not screen design.
What is the difference between em and rem?
em is relative to the parent element's font size. rem is relative to the root element's font size. rem is more predictable because it does not change based on nesting.
What is the default rem to pixel ratio?
By default, 1rem equals 16px. You can change this by setting a different font size on the html element.
When should I use viewport units?
Use vh and vw when you want elements sized relative to the browser window. vh is useful for full-height sections. vw is useful for responsive typography.
Can I change the base font size?
Yes. The converter has a base font size setting that controls how em and rem values are calculated. Set it to match your project's root font size.
Is my data sent to a server?
No. All conversion happens in your browser using JavaScript. Nothing is transmitted.