Kartama
HomeAppsArticlesAboutContact
Home
/
Apps
/
CSS Unit Converter
CSS Unit Converter

CSS Unit Converter

Convert between CSS units like px, em, rem, pt, pc, in, cm, mm, vw, and vh instantly. See every unit at once for accurate, ready-to-use stylesheet values.

Convert between CSS units like px, em, rem, pt, pc, in, cm, mm, vw, and vh instantly. See every unit at once for accurate, ready-to-use stylesheet values.

Share this app

CSS Unit Converter

CSS supports a dozen different length units - absolute ones like px, pt, in, and cm, font-relative ones like em and rem, and viewport-relative ones like vw and vh - and mixing them up is one of the most common sources of inconsistent spacing in a stylesheet. This tool converts a value between any two CSS units and shows the same value expressed in every supported unit at once, using the base font size and viewport dimensions you provide.

Absolute units

Absolute units are fixed relative to each other, independent of font size or screen. They all resolve to pixels through the same reference used by browsers (96px per inch):

1 in=96 px,1 cm=962.54 px,1 mm=9625.4 px1\ in = 96\ px, \qquad 1\ cm = \frac{96}{2.54}\ px, \qquad 1\ mm = \frac{96}{25.4}\ px 1 pt=9672 px,1 pc=16 px1\ pt = \frac{96}{72}\ px, \qquad 1\ pc = 16\ px

Font-relative units

rem is always relative to the root (<html>) element's font size, while em is relative to the current element's font size. This tool asks for a single base font size and uses it for both, which is accurate whenever the element you're styling doesn't have its own font-size override:

1 em=1 rem=base_font_size (px)1\ em = 1\ rem = base\_font\_size\ (px)

Viewport-relative units

vw and vh are percentages of the browser's viewport width and height, so converting them needs the viewport size you're designing for:

1 vw=viewport_width100 px,1 vh=viewport_height100 px1\ vw = \frac{viewport\_width}{100}\ px, \qquad 1\ vh = \frac{viewport\_height}{100}\ px

How the conversion works

Every unit is first converted to a common base of pixels, then from pixels into the target unit:

px=value×factorfrom,result=pxfactortopx = value \times factor_{from}, \qquad result = \frac{px}{factor_{to}}

How to use this tool

  1. Enter the numeric value you want to convert
  2. Choose the unit you're converting from and the unit you're converting to
  3. Set the base font size (defaults to the browser default of 16px) used for em/rem
  4. Set the viewport width and viewport height used for vw/vh
  5. Submit to see the converted value, plus a full table showing that same amount expressed in every supported unit

Worked example

Converting 24px to rem, with a base font size of 16px:

result=2416=1.5 remresult = \frac{24}{16} = 1.5\ rem

So font-size: 24px and font-size: 1.5rem produce the same rendered text size when the root font size is 16px - which is why 1.5rem is the more common way to write that value in a modern, accessibility-friendly stylesheet.