Built-in toolFree · No signup

CSS Units Converter

Convert any CSS value between px, rem, em, vw, vh, %, pt, cm, and mm instantly. Configure root font size, viewport dimensions, and parent element size to match your project.

Value

Unit

Pixel equivalent

24.000px

Tip

Click any value in the table to set it as source

Unit	Value	Description
px		Absolute pixel unit
rem		Relative to root font size
em		Relative to parent font size
vw		% of viewport width
vh		% of viewport height
%		% of parent element size
pt		Points (1pt = 1.333px)
cm		Centimetres (1cm ≈ 37.8px)
mm		Millimetres (1mm ≈ 3.78px)

Conversion Settings

Root font size16px

Viewport width1440px

Viewport height900px

Parent element size1000px

Quick Reference (at 16px root)

px	rem	% (of 1000px)	pt
16px	1rem	100%	1.333pt
8px	0.5rem	50%	0.667pt
24px	1.5rem	150%	2pt
32px	2rem	200%	2.667pt
48px	3rem	300%	4pt

CSS Comment

/* CSS Units Conversion * Source: 24.000px * * 24.000px * = 1.5000rem * = 1.6667vw * = 18.000pt * * Settings: root 16px | vw 1440px | vh 900px | parent 1000px */

How to use

01

Enter a value

Type any CSS value in the input field and pick the source unit from the dropdown.

02

Configure settings

Set root font size, viewport width and height, and parent element size to match your project context.

03

Read all units

The conversion table updates every unit instantly — all 9 units shown side by side.

04

Click any row

Click a value in the table to make that unit the new source and recalculate everything from it.

More CSS utility tools

From our directory of 30+ CSS tools.

Flexbox Froggy preview

Flexbox Froggy

Learn CSS Flexbox through 24 interactive coding puzzles with frogs.

#flexbox#learning#interactive

Cubic Bezier preview

Cubic Bezier

Drag control handles to create and compare custom CSS easing curves.

#easing#animation#timing-function

Easing Functions Cheat Sheet preview

Easing Functions Cheat Sheet

Visual reference for every CSS easing function with live animation demos.

#easing#animation#reference

Tailwind CSS Cheat Sheet preview

Tailwind CSS Cheat Sheet

Searchable, filterable reference for every Tailwind CSS utility class.

#tailwind#reference#cheatsheet

CSS Reference preview

CSS Reference

Visual, illustrated reference for every CSS property with live examples.

#reference#documentation#properties

CSS-Tricks preview

CSS-Tricks

The definitive CSS reference, almanac, and tutorial hub for developers.

#reference#tutorials#almanac

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →