CSS Unit Converter

Features

• Eleven units at once: px, rem, em, vw, vh, vmin, vmax, pt, in, cm, mm
• Adjust what the relative units are relative to: root font size, current font size, viewport width and height
• Every relative row states its assumption inline, so the assumption is never mistaken for a fact
• The input may carry a unit (24px, 1.5rem) or not; without one the dropdown decides
• Full-width digits, full-width punctuation and pasted quotes are all understood — those come from the input method, not from you
• Results are grouped (relative units, absolute units) and each row copies on its own
• Computed live, with no Run button; an empty input falls back to a 24px sample so the page is never blank

How to use

1. Enter a value in the input, for example 24px
2. If you entered only a number, choose its unit in the dropdown
3. Adjust the root font size, current font size and viewport as needed
4. Read the results and copy any single row

FAQ

Why is there no percentage row?

Because a percentage has no single meaning in CSS: `100%` in a font size means the inherited size, while a percentage in width, height, `padding` or `translate` each resolves against something different (the containing block, the element’s own size, the viewport…). The tool cannot know which property this value will end up in, so any number it printed would be invented. For font sizes the `em` row is exactly equivalent (`1em === 100%`), so everyday conversions are unaffected.

Why no ch, ex, lh or cqw?

Because their conversion depends on things this tool cannot see. `ch` is the width of the 0 glyph and `ex` the height of a lowercase x — both depend on the font metrics in use; `lh` is the current line height; `cqw` is relative to the nearest container query container. None of those are known until the element actually renders, so any offline conversion would produce a plausible wrong answer. Entering one of these units gets an explanation rather than a silent fallback to px.

How many pixels are in an inch?

96, fixed by the CSS specification and unrelated to the screen’s physical pixel density — which is why this tool needs no “screen resolution” input. Only print work (real physical dimensions) needs the other conversion, and that is what a PPI calculator is for. `pt` follows from it: 72 points to the inch, so `1pt = 96 ÷ 72 ≈ 1.333px`, and `12pt` is exactly `16px`.

What is the actual difference between rem and em?

`rem` is always relative to the root element (`<html>`), so changing it once changes everything; `em` is relative to the current element’s font size, which is usually inherited from its parent, so the same CSS nested one level deeper gives a different result — which is both its purpose (scale with context) and where it surprises people. Keeping them as two separate adjustable parameters is meant to make that difference visible.