CSS Unit Converter
Convert between px, rem, em, vw, vh, pt and more in real time. Configurable base font-size. No sign-up.
Edit any field — all convert in real time
Built by
Miguel Ángel Colorado Marin
Built by
Miguel Ángel Colorado Marin
Full-Stack Developer · Guadalajara, España
I develop web apps, digital tools and full projects — from design to deployment.
How to use the CSS unit converter?
- 1
Configure base font-size and viewport
Click the «Settings» button to adjust the base font size (default 16px) and viewport dimensions (default 1440×900px). These values affect conversions for rem, em, vw and vh respectively.
- 2
Enter a value in any field
Type the value you want to convert in the source unit field. You can use decimals. The conversion happens instantly in all other fields at the same time, with no button press needed.
- 3
Read the values in the table
When you enter a value, a reference table appears with all values in all units. This view is especially useful for comparing and copying the exact value in CSS (e.g., «1.5rem» or «24px»).
- 4
Copy the CSS value
Each field has a small copy button that copies the value together with the unit (e.g. «1.5rem» or «16px»), ready to paste directly in your CSS. The button appears when you hover over the field.
Frequently asked questions
How many pixels is 1rem?
1rem equals the font size of the root element (html). By default in all browsers it is 16px, so 1rem = 16px, 0.5rem = 8px, 1.5rem = 24px, etc. You can change the base size in settings if your project uses a different value.
What is the difference between rem and em?
rem (root em) is always relative to the font size of the root element (html), regardless of context. em is relative to the font size of the parent element. This makes rem more predictable and easier to use in responsive design, as its value does not change based on DOM hierarchy.
When to use vw and vh?
vw (viewport width) and vh (viewport height) are units relative to the viewport size. 1vw = 1% of viewport width, 1vh = 1% of viewport height. They are perfect for elements that must adapt to screen size, such as full-screen headers, responsive text (using clamp()) or scroll-free layouts.
How many pixels is 1pt?
1pt (typographic point) = 1/72 inch. Since CSS uses 96 DPI as reference, 1pt = 96/72 ≈ 1.333px. Points are mainly used for printing (@media print) and in documents with typographic styles inherited from editorial design systems.
Why is rem better than px for accessibility?
Using rem instead of px respects the user's font size setting in the browser. If a user increases the default font size (e.g., to 20px due to vision problems), elements with rem scale proportionally, while those defined in px remain fixed and may become unreadable.
Embed the converter on your site
Embed this CSS unit converter in any web page with a simple iframe:
<iframe
src="https://miguelacm.es/embed/css-unit-converter"
width="100%"
height="600"
frameborder="0"
title="CSS Unit Converter"
></iframe>