Modern CSS Units Converter

How the Modern CSS Units Converter works

CSS has grown far beyond px, em and %. Since 2022 every major browser has added units tied to the font, the line box, the mobile browser chrome and the size of a container. They solve real problems, such as text measures that stay readable, hero sections that fit a phone screen, and components that size themselves to their slot, but they are harder to picture because their pixel value depends on context. Set the context once and this converter shows every unit together.

How to use the modern CSS units converter

1. Enter an amount and pick the unit you have and the unit you want.
2. Choose a font family and set the element font size, root size and line height.
3. Enter the viewport and container sizes you are designing for. The defaults match a typical phone in portrait with a 600 by 400 pixel container.
4. Read the main conversion at the top and every other unit underneath.

The units at a glance

The formula and two worked examples

The formula is the same for every unit: pixels = amount × pixels per unit, and the answer in the target unit is those pixels ÷ the target's pixels per unit. Only the pixels per unit changes.

For example, 2lh on a paragraph at 18px with line-height: 1.6 is 2 × 28.8 = 57.6px, which is 3.6rem at a 16px root. As a second example, 50cqi in a 600px wide container is 300px, or 18.75rem. How many pixels is 100svh? On the default 664px small viewport, exactly 664.

Common values in pixels at the default settings

Why font units are measured, not guessed

ch and ex vary a lot between fonts. In Verdana the zero is wide, so 65ch is far wider than in Times New Roman. The specification falls back to 0.5em when a font has no metric, which is often wrong. This tool draws the actual glyphs with the browser's canvas and measures them, so the numbers reflect the font you choose as it is installed on your device. A different operating system may ship a slightly different version of the same font, so treat small differences as normal.

The three viewport heights

On phones the browser toolbar slides away as you scroll, so the visible height changes. Classic 100vh uses the large height, which is why a full-screen hero often hides its button behind the address bar. svh uses the height with toolbars showing, so content always fits. lvh uses the height with toolbars hidden. dvh follows the real height as it changes, which is accurate but can make a layout jump during scrolling. On desktop all three are the same.

Tips and pitfalls

Use svh for anything that must fit. A sign-up screen with min-height: 100svh keeps its button visible on load. Save dvh for cases where the jump on scroll is acceptable.

Container units need a container. cqi and cqb refer to the nearest ancestor with container-type set. With no container they fall back to the small viewport units, which can look right by accident on the page you test and break elsewhere.

cqb needs a block size container. container-type: inline-size only tracks width, so cqb then measures the next container up or the viewport. Use container-type: size and give the container a height.

lh respects the element's line height. A paragraph with line-height: 1.6 at 18px has 1lh of 28.8px. That makes margin-block: 1lh a tidy way to keep spacing on the text rhythm.

Fallbacks are easy. Write the old unit first and the new one second, such as height: 100vh; height: 100svh;. Browsers that do not know the new unit keep the first line.

Reading the result

The first line is the conversion you asked for. Below it are the same length in every other unit, followed by the measured font metrics so you can see where the font-relative figures came from. Values are rounded to four decimal places, which is finer than any screen can show.

Related tools