Skip to content
ToolQivo

CSS Units Converter

Convert between px, rem, em, pt, %, vw and vh with the right context.

Developer Tools Reviews Free · no sign-up

Quick Tool Overview

The CSS Units Converter converts between every length unit at once, exposing the root font size, parent font size and viewport dimensions as settings rather than assuming them — because the relative units depend on all four.

What it does
Converts between every CSS length unit
You give it
A value, a unit and a context
You get back
Every other unit, plus a conversion table
Best for
Building a spacing scale and converting a design
Developer Tools Free, unlimited use No sign-up Runs in your browser

About the CSS Units Converter

Convert a value between every CSS length unit at once. The absolute units have fixed relationships — CSS defines an inch as exactly 96px regardless of the real screen — so those are simple arithmetic.

The relative units are where a converter has to be honest. rem depends on the root font size, em on the parent element's, percentages on the containing block, and the viewport units on the window. All four are exposed as settings rather than assumed, so a project with a 62.5% root trick or a 14px base converts correctly. A conversion table for the common sizes is generated alongside, which is what you actually want when setting up a spacing scale.

Key features of the CSS Units Converter

Context is adjustable

Root size, parent size and viewport dimensions are settings, so a project with a 14px base or the 62.5% trick converts correctly.

Every unit at once

px, rem, em, pt, pc, in, cm, mm, Q, %, vw, vh, vmin, vmax, ch and ex, all calculated together.

A conversion table

The common sizes converted in one table, which is what you want when setting up a scale rather than converting a single value.

Fixed ratios explained

CSS defines an inch as exactly 96px regardless of your screen, which is why 12pt is exactly 16px.

Compounding warned about

em is relative to the element’s own font size, so nested values multiply — which is how text quietly shrinks.

How to use the CSS Units Converter

  1. 1

    Enter a value and unit

    Every other unit is calculated at once.

  2. 2

    Set the context

    Root font size, parent font size and viewport dimensions.

  3. 3

    Read the table

    A conversion table for the common sizes, for setting up a scale.

  4. 4

    Copy a value

    Click any result to copy it.

Frequently asked questions

rem for anything that should scale with a reader's font size preference — text, spacing, most sizing. px for things that genuinely must not scale, such as a one-pixel border.

Reviews of the CSS Units Converter

What people who use the CSS Units Converter think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the CSS Units Converter. It takes half a minute and no account.

Write the first review

More developer tools