📐Dev

CSS Unit Converter

Convert between px, em, rem, %, pt, vh, vw for common design values — configurable 16 px base. Everything in your browser.

Root font size, for rem (px) Parent font size, for em (px)

rem is relative to the root element, em to the parent. They only match while both sizes are equal.

Viewport (px)

px em rem % pt vw

Convert CSS units

CSS has a soup of units: px, em, rem, %, pt and vw, and each one makes sense in a different context. Knowing what one equals in another helps you build more flexible layouts. This converter handles that translation for the common design values.

Relative units depend on a base, and there are two of them here, because rem is relative to the root element and em to the parent — the two only agree while both sizes match, and it is precisely when they stop matching that the conversion matters. Both are configurable, along with the viewport width. So you find out how many rem make up 24 px, or how a measurement turns into viewport units, without doing division in your head on every tweak.

The calculation runs in the browser. A practical reference for web developers who keep moving between fixed and relative units all day.

Frequently asked questions

Where is the vh field? I only find vw.

Only vw, indeed. The conversion fields are px, em, rem, %, pt and vw, plus the two references: Base (px), preset to 16, and Viewport (px), preset to 1920. Since vh hangs on the window height rather than the width, it would need a second reference and was left out. To convert a height, put the height you want in the Viewport field and read the vw result as if it were vh. Units such as ch, ex, cm and in are outside the set as well.

em and rem always show the same number. Is that right?

It is right within this tool's model: both read the Base (px) field. In real CSS, rem always refers to the root while em refers to the parent element's font size, so the two match only when the parent inherits the root size. To convert em against a different parent, say a card with a 20px font size, put 20 in Base and read the em column; to go back to rem, set Base to 16 or to whatever your :root declares.

I changed Base and the other fields jumped. What happened?

Editing Base or Viewport restarts the calculation from the px field, never from the last field typed. If 2 was sitting in the rem box and Base changed, px stays where it was and rem gets rewritten from it. Retype the source value once the reference is set. Results always carry four decimal places, trailing zeros included (1.0000), and the field being typed in is left untouched meanwhile.

Related Tools

📐

CSS Clamp Calculator

Generate CSS clamp() values for fluid typography and spacing. Enter minimum/maximum sizes and viewport widths to get a ready-to-paste clamp() function.

PX to REM and EM Converter

Type a pixel, rem or em value and the other two update live from your root font size, 16px by default, plus a table from 8 to 96 px in pt too.

🎯

Focus-Visible CSS Snippet

Builds a ready-to-paste :focus-visible rule from an outline colour and a thickness in pixels, with 2px offset, for the WCAG 2.4.7 focus indicator.

🌐

HTML Preview

Write HTML, CSS and JavaScript and see the rendered result in real time. Isolated sandbox — no code is sent to any server.

〰️

Cubic Bezier Generator

Create and visualize cubic-bezier curves for CSS animations. Drag control points, preview the animation and copy the value. Includes presets (ease, ease-in, ease-out). Everything in your browser.

🔘

CSS Button Generator

Create custom CSS buttons: color, text, padding, border-radius, shadow and hover. Live preview and ready-to-copy HTML+CSS. Everything in your browser.