CSS Unit Converter

Convert between CSS units: px, rem, em, vw, vh, pt, cm and more

What is it and how does it work?

A CSS unit converter translates a size between the units CSS uses for layout — px, rem, em, vw, vh, pt, cm and more — so you can move a value cleanly from one unit to another. CSS offers many units because they answer different needs: pixels are fixed and absolute, rem and em are relative to font sizes for scalable typography, and vw and vh are relative to the viewport for responsive layouts. Converting between them lets you express the same size in whichever unit a particular rule should use.

The conversions that matter most are the relative ones, because they depend on context: a rem is multiples of the root font size (commonly 16px), an em is relative to the element's own font size, and viewport units are percentages of the window. That dependence is exactly what makes converting by hand error-prone — 1.5rem is only 24px if the root is 16px. This tool handles the base sizes for you so you get accurate values, helping you build scalable, responsive styles instead of hardcoding pixels everywhere. It runs in your browser.

Common use cases

• Switching to scalable units: convert a pixel value to rem so your spacing and text scale with the user's font-size setting.
• Matching a design in different units: turn a designer's px measurement into the rem or em your stylesheet uses.
• Working with responsive units: see what a vw or vh value equals in pixels at a given viewport size.

Frequently asked questions

What is the difference between px, rem and em?

A pixel (px) is a fixed, absolute unit. A rem is relative to the root element's font size, so it scales consistently across the page. An em is relative to the current element's font size, so it can compound when nested. rem is usually preferred for predictable, scalable sizing.

How many pixels is 1rem?

It depends on the root font size. By default browsers use 16px, so 1rem equals 16px and 1.5rem equals 24px — but if the root font size is changed, every rem value changes with it. That base-dependence is why this converter asks for or assumes a root size.

When should I use vw and vh?

Viewport units (vw, vh) are percentages of the window width and height, so they are ideal for elements that should scale with the screen — full-height sections, fluid hero text or responsive spacing. They change as the viewport resizes, unlike fixed px values.

Why use relative units instead of pixels?

Relative units like rem respect the user's font-size preferences and scale gracefully across devices, which improves accessibility and responsiveness. Hardcoding pixels everywhere ignores those settings and makes layouts rigid, which is why converting to relative units is often worthwhile.

CSS

Box Shadow Generator · Border Radius Generator · Flexbox Generator · CSS Grid Generator · Text Shadow Generator · CSS Animation Generator