consolelog.tools

CSS Units Converter

Convert any CSS length into every other unit at once — px, rem, em, %, pt, viewport (vw/vh/vmin/vmax), and the modern container-query units (cqw/cqi…). Adjustable font, viewport, and container contexts, font-measured ch/ex, and a true-size ruler.

About this ToolHow it works, benefits & use cases

CSS length units are only meaningful in context — 1rem depends on the root font-size, 1vw on the viewport, 1cqi on the container — so this converter takes one value and shows it in all 22 units at once against contexts you control. Enter a number and pick its unit, and the grid fills with the equivalents grouped as Absolute (px, pt, pc, in, cm, mm, Q), Font-relative (rem, em, %, ch, ex), Viewport (vw, vh, vmin, vmax), and Container (cqw, cqh, cqi, cqb, cqmin, cqmax). Set the root and element font-size, a viewport (with device presets or a "Use my screen" button), and a container size; ch and ex are measured from the page's actual font rather than guessed. A true-size ruler draws the length at 100% zoom with 50px gridlines, click any conversion to flip the input to that unit, and copy a single value or download every conversion.

How to Use

  1. 1Type a value in the input and choose its unit from the "From unit" dropdown.
  2. 2Read the px equivalent below the input, and scan the full conversion grid grouped by Absolute, Font-relative, Viewport, and Container.
  3. 3Set the Context: root font-size (for rem), element font-size (for em/%/ch/ex), a viewport size, and a container size.
  4. 4Use a device preset or "Use my screen" to populate realistic viewport dimensions for vw/vh.
  5. 5Click any unit cell to adopt it as the new input unit, or use the copy icon to grab a single value; download all conversions from the output panel.

Key Benefits

  • Converts one length into all 22 CSS units simultaneously
  • Covers modern container-query units (cqw, cqh, cqi, cqb, cqmin, cqmax)
  • Editable root/element font-size, viewport, and container contexts
  • ch and ex measured from the actual page font instead of assumed
  • Device presets and a "Use my screen" button for realistic viewport math
  • True-size ruler that draws the length at 100% zoom with 50px gridlines
  • Click a conversion to flip the input unit, keeping the same physical length

Common Use Cases

  • Translating a px value from a design file into rem for accessible scaling
  • Working out vw/vh equivalents for a hero section on a target device
  • Learning the new container-query units (cqi/cqw) by seeing them next to px
  • Checking how ch behaves with your actual font when sizing inputs or measure
  • Reconciling absolute units (pt, mm, in) for print stylesheets

Value

= 16px

Actual size

Each gridline = 50 CSS px (at 100% zoom)

16px long

Every conversion, ready to paste

/* 16px = */
16px
12pt
1pc
0.1667in
0.4233cm
4.2333mm
16.9333Q
1rem
1em
100%
2ch
2ex
1.25vw
2vh
2vmin
1.25vmax
2.6667cqw
4cqh
2.6667cqi
4cqb
4cqmin
2.6667cqmax

Converts to

Absolute

Font-relative

Viewport

Container

Context

px
px
Viewport (vw/vh)
px
px
Container (cqw/cqh/cqi/cqb)
px
px

ch and ex are measured from this page's font (≈ 0.500 / 0.500 em).

One value, every unit

Type a length in any unit and read it in all 22 at once. Relative units depend on context, so set the root and element font-size, a real viewport (try the device presets or Use my screen), and a container for the modern cqw/cqi query units. Click any conversion to flip the input to that unit.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Related tools