📐 CSS Unit Converter
Convert CSS length units: px, rem, em, pt, vw, vh, %. Live conversions with configurable root font-size, viewport size, and percentage base.
html { font-size: 16px } → 1rem = 16px
1vw = 1% of this width
1vh = 1% of this height
100% equals this many pixels
About this tool
The CSS Unit Converter turns any length value into every other unit CSS understands — px, rem, em, pt, the four viewport units (vw, vh, vmin, vmax), and %. Set the root font-size, viewport size, and percentage base to match your project and every result updates live.
Example: with a 16 px root, 1.5rem → 24px, 18pt, 1.667vw (at 1440 px wide), 150% (at a 16 px base). Flip the root to 10 px and 1.5rem becomes 15px instead — handy when migrating a design system between Tailwind's default and a 10 px scale.
About em: in CSS, em is relative to the parent element's font-size, so it has no single fixed value. Here it is computed against the root font-size just like rem — useful as a reference when you know the parent equals the root. Always sanity-check em against the real element tree.
FAQ
Why is 1rem not always 16px? ›
rem is defined relative to the root element font-size (the html tag). Browsers default to 16px, but many frameworks and reset stylesheets override it. Enter your actual root size in the "Root font-size" box and every rem value is recalculated against it.
How are pt (points) converted? ›
CSS defines 1 inch as 96 pixels and 1 point as 1/72 of an inch, so 1pt = 96/72 px = 1.333px. This is the same ratio browsers and print software use, so 12pt text in a Word document becomes 16px on the web.
Why does vw change when I resize my browser? ›
vw and vh are fractions of the viewport (the visible browser area). 1vw equals 1% of the viewport width. Set the "Viewport width" field to your design's target width (e.g. 1440 for a desktop layout) to see what a vw value resolves to at that size.
What is the difference between vmin and vmax? ›
vmin is 1% of the smaller viewport dimension, and vmax is 1% of the larger one. On a 1440×900 screen, vmin uses 900 (the height) and vmax uses 1440 (the width). They are useful for responsive sizing that scales with the whole viewport.