Design

CSS Unit Converter

Free CSS unit converter. Convert px to rem, rem to px, pt to px, and any CSS length unit including em, in, cm, mm, vw, vh and percent. Configurable root font size and viewport. Runs in your browser.

YOUR WORKSPACEFree to use. No sign-up.

Value

From unit

To unit

Root font size (px) for rem/em

Viewport width (px) for vw

Viewport height (px) for vh

—

Enter a value and pick units.

Deep dive guides

A LITTLE CONTEXT · 5 MIN READrem vs em vs px: CSS Units Explained

All 5 related guides

rem vs em vs px: CSS Units Explained — How px, em and rem really differ, the em compounding trap, the 62.5% root trick, and a decision rule for sizing text, spacing and borders.
CSS Flexbox: The Container Properties That Matter — flex-direction, justify-content, align-items, flex-wrap and gap — how the flex container actually positions its items.
CSS Grid: Tracks, fr Units, and Gaps — How grid-template-columns and rows define the skeleton: track sizes, the fr unit, repeat(), minmax(), and gap.
Fluid Typography: How clamp() Scales Type Smoothly — The algebra behind font-size: clamp() — slope, intercept, why rem + vw beats pixels, and how to choose viewport anchors.
Aspect Ratios Explained: From 4:3 to 21:9 — An aspect ratio is a rectangle's shape independent of size. How GCD reduction produces 16:9 from 1920x1080, which formats have names, and how to resize cleanly.

How css unit converter works

CSS length units fall into three families. Absolute units (px, pt, pc, in, cm, mm) map to a fixed number of pixels using the CSS reference pixel where 1 inch equals 96 pixels. Font-relative units (rem, em) are multiples of the root font size, which defaults to 16px but is configurable here. Viewport units (vw, vh) are a percentage of the viewport width or height.

The converter first converts your input value to pixels using its source unit, then converts those pixels to the target unit. For example, 16px becomes 1rem when the root font size is 16px, and 12pt becomes 16px because 12 times 96 over 72 equals 16. Percent is handled relative to a configurable base.

Because rem, em, vw, vh, and percent depend on a context (root font size, viewport dimensions, or percent base), the converter exposes those as inputs you can change. The defaults of a 16px root font and a 1920x1080 viewport match the most common web design assumptions.

Frequently asked questions

What is the difference between rem and em?

rem is relative to the root element's font size, so 1rem is the same everywhere on the page. em is relative to the current element's font size, which can change as you nest. This converter treats em like rem against the root font size, which is the most common conversion people need (px to em at the root).

Why does 1 inch equal 96 pixels?

CSS defines the reference pixel as 1/96th of an inch, so 1in = 96px regardless of the physical screen. This keeps layouts consistent across devices with different pixel densities.

How are vw and vh computed?

vw is 1% of the viewport width and vh is 1% of the viewport height. The converter uses your viewport width and height inputs, so 50vw at a 1920px viewport equals 960px.

What is the percent base?

Percent in CSS is relative to a parent value that depends on the property (width, font-size, padding). The converter uses a single configurable base, defaulting to the root font size, so you can convert things like 150% font-size to px.

CSS Unit Converter

Deep dive guides

How css unit converter works

Frequently asked questions

Related tools

CSS Gradient Generator

CSS Box Shadow Generator

Border Radius Generator

Aspect Ratio Calculator

CSS Grid Generator