📐

CSS Unit Converter

Convert between px, em, rem, pt, pc, %, vw, vh. Tweak the root and viewport context to match your design system.

Value to convert

Context (assumed defaults)

px
16
em
1
rem
1
pt
12
pc
1
%
100.0
vw
1.111
vh
1.778

About this tool

A CSS unit converter for designers and front-end developers. Enter any value in any unit and instantly see equivalents in seven others. The context panel lets you set custom root font size, viewport dimensions, and percentage base — exactly matching your project setup.

🔄Convert all 8 common CSS units
⚙️Configurable root font size (1rem)
📱Custom viewport width / height
🎯Adjustable percentage base
📋Copy any value with one click
🔢Live precision (3–4 decimal places)

How to use it

Quick steps to get the most out of this utility.

  1. 1

    Enter a value

    Type the number and select its current unit.

  2. 2

    Optionally adjust the context

    Default 16px root and your current viewport are used unless you change them.

  3. 3

    Read off the conversions

    All 8 units are calculated live. The active unit is highlighted.

  4. 4

    Copy and paste into CSS

    Each card has a copy button that includes the unit suffix.

Quick reference

Absolute units

px, pt (point = 1/72 inch), pc (pica = 12pt). Fixed regardless of parent or viewport.

Relative-to-font

em (parent font size), rem (root font size). Most useful for typography and accessible scaling.

Relative-to-viewport

vw (1% viewport width), vh (1% height). Great for hero sections and fluid sizing.

Percentage

% is relative to the parent property — width to parent width, font-size to parent font-size, etc.

Frequently asked questions

What does 1rem equal in pixels?+

By default, 1rem = 16px because that's the browser's default root font size. If you set html { font-size: 18px } in CSS, then 1rem becomes 18px. The whole point of rem is that this scales site-wide if you change the root.

When should I use rem vs em?+

Use rem for font sizes, spacing, and layout — predictable because it's always relative to the root. Use em for component-internal scaling — e.g. padding inside a button that should grow with the button's font size.

What's the difference between vw and %?+

1vw = 1% of the viewport width, regardless of any parent. 1% in width is 1% of the parent element's width. Use vw for hero text or full-bleed elements; use % for elements that should respect a container.

Keep exploring

More utilities and reading from Toolisk.