Converter Tools
CSS Units Converter
Convert any CSS length value between px, rem, em, pt, pc, in, cm, mm, ch, ex, vh, vw, vmin, vmax, and percent in your browser.
Source value
Type any CSS length value, pick its unit, and every other unit is recomputed live with the configured context.
Absolute CSS pixel. 1in equals 96px by definition. Numbers can include decimals or a comma. Unit suffixes typed at the end are stripped.
Common pixel values
Click any value to convert it from pixels into every other unit.
Context
The root font size resolves rem. The parent font size resolves em, ch, and ex. Viewport units use the configured width and height. Percent uses the configured container width.
Used for percent (%) conversions.
Width of the 0 glyph as a fraction of em. 0.5 is typical.
x-height as a fraction of em. 0.5 is typical for Latin fonts.
Equivalent values
16 CSS pixels
Pixels (px)source
16px
Rem
1rem
Em
1em
Points (pt)
12pt
Picas (pc)
1pc
Inches (in)
0.16667in
Centimeters (cm)
0.4233cm
Millimeters (mm)
4.2333mm
Ch (0-glyph width)
2ch
Ex (x-height)
2ex
vh (viewport height)
1.7778vh
vw (viewport width)
1.1111vw
vmin (smaller axis)
1.7778vmin
vmax (larger axis)
1.1111vmax
Percent (%)
1.3333%
Spec reference
Fixed CSS conversion constants used by every modern browser.
1 in
96 px
1 pt
96 / 72 px (1.333 px)
1 pc
12 pt (16 px)
1 cm
96 / 2.54 px (37.795 px)
1 mm
96 / 25.4 px (3.7795 px)
1 rem
root font size
1 em
parent font size
1 vw
1% of viewport width
1 vh
1% of viewport height
1 vmin
1% of the smaller axis
1 vmax
1% of the larger axis
1 ch
width of the 0 glyph
1 ex
x-height of the current font
1 %
1% of the containing block
How to use
- Type any number into the source value field. The input accepts decimals, commas, and trailing unit suffixes.
- Pick the unit you typed from the source unit dropdown (px, rem, em, pt, pc, in, cm, mm, ch, ex, vh, vw, vmin, vmax, or %).
- Adjust the context if needed: root font size, parent font size, viewport width and height, container width, and the ch and ex ratios. One-click presets cover common scenarios.
- Read the equivalent value in every other unit from the live conversion table.
- Click Copy next to any unit row to grab a single value, or click Copy CSS block to grab the full reference snippet.
About this tool
CSS Units Converter translates a single CSS length value into every common CSS length unit at once: px, rem, em, pt, pc, in, cm, mm, ch, ex, vh, vw, vmin, vmax, and percent. Type any value, pick its source unit, and the conversion table updates live, with a copy button on every row and a ready-to-paste CSS reference block. The conversions follow the CSS spec exactly: 1 inch is 96 CSS pixels, 1 point is 96/72 px, 1 pica is 12 points, and 1 cm and 1 mm derive from the inch. Font-relative units use the configurable root font size (for rem) and parent font size (for em, ch, and ex), so the math matches whatever scale your stylesheet actually uses. Viewport units use a configurable viewport width and height, so you can answer questions like how many pixels 4vw is on a 390 px iPhone screen or what 1vmin works out to on a 1440 by 900 desktop. The percent unit uses a configurable container width for responsive grids. Optional ch and ex ratios let you tune the character width and x-height to match a specific font. Seven one-click presets cover the browser default, a compact 14 px scale, a comfortable 18 px scale, the 62.5% root trick (1rem equals 10px), iPhone and iPad viewports, and a print A4 sheet at 96 dpi. Common pixel values from the Tailwind, Bootstrap, and Material spacing scales are one click away. Everything runs in your browser; no values are uploaded.
Free to use. Works in your browser. No signup, no login.
Related tools
You may also like
Pixels to REM Converter
Bidirectional pixel and rem or em converter with batch mode and a reference chart.
Open tool
DeveloperCSS Letter Spacing Converter
Convert tracking values from Figma, Sketch, and Adobe to CSS em, px, and rem.
Open tool
GeneratorCSS Line-Height Generator
Visual line-height picker with live preview, presets, measure check, and CSS or Tailwind output.
Open tool
GeneratorType Scale Generator
Build a modular font size ladder with live preview and copy-ready CSS, Tailwind, and JSON.
Open tool
GeneratorCSS Clamp Generator
Build clamp() for fluid type and spacing with a live viewport preview.
Open tool
DeveloperViewport Size Tester
Live viewport, screen, DPR, breakpoint, and media query readout.
Open tool