CSS Units Converter
Convert between px, rem, em, %, vw, vh, vmin, vmax, pt, pc, in, cm, mm, Q, ch and ex using a reference context you control — root font size, parent font size, viewport, and the font metrics behind ch and ex.
Reference context
Single value
1 rem = 16px · 1 em = 16px · 1 vw = 12.8px · 1 vmin = 8px · 1 ch = 8px
16px in every unit
Same length, expressed in all sixteen units. The % row is measured against the viewport width; the em, ch and ex rows against 16px.
| Unit | Value | 1 unit = | Resolved against |
|---|---|---|---|
| px | 16px | 1px | CSS pixel (1/96 in, device-independent) |
| rem | 1rem | 16px | root font size |
| em | 1em | 16px | this element's / parent font size |
| % | 1.25% | 12.8px | percentage — see the % basis setting |
| vw | 1.25vw | 12.8px | 1% of viewport width |
| vh | 2vh | 8px | 1% of viewport height |
| vmin | 2vmin | 8px | 1% of the smaller viewport side |
| vmax | 1.25vmax | 12.8px | 1% of the larger viewport side |
| pt | 12pt | 1.333333px | point — 72 per inch |
| pc | 1pc | 16px | pica — 12 points, 6 per inch |
| in | 0.166667in | 96px | inch — 96px |
| cm | 0.423333cm | 37.795px | centimetre — 2.54 per inch |
| mm | 4.233333mm | 3.779528px | millimetre |
| Q | 16.933q | 0.944882px | quarter-millimetre |
| ch | 2ch | 8px | width of the "0" glyph |
| ex | 2ex | 8px | x-height of the font |
Fluid clamp() builder
Pick a size at a small viewport and a size at a large viewport; the builder solves the linear interpolation and hands you a clamp() that hits both exactly.
clamp(1rem, 0.86957vw + 0.80435rem, 1.5rem)
Which unit for what
Use rem for type and spacing
rem tracks the user's browser font-size preference, so it scales for accessibility. Your current value is 1rem.
Use px for hairlines and fixed chrome
Borders, icon strokes, 1px outlines and shadow offsets should not scale with text. 16px is a hard pixel.
Use em for component-local scaling
em is relative to the element's own font-size, so a button's padding in em grows with its label. Nesting compounds, so keep it shallow.
Use % carefully
Percentages mean different things per property: width/height → the containing block, font-size → the parent font size, line-height → the element's own font size.
Use vw/vh/vmin/vmax for viewport-bound layout
Headline scaling, hero heights, full-bleed sections. 100vh overflows on mobile because of dynamic toolbars — prefer 100dvh. 1.25vw is the current 1vw step.
Use ch for measure (line length)
max-width: 65ch is the classic readable column. Also handy for aligning monospace output. 1ch here is 2ch.
Use ex and Q rarely
ex follows the x-height and varies a lot between fonts; Q (quarter-millimetre) only really belongs in print stylesheets.
Use clamp() instead of media queries for fluid type
One declaration replaces a stack of breakpoints. Always keep the middle expression unit-consistent with the min and max.
About this tool
This converter resolves every common CSS length unit to CSS pixels through the reference context you configure — root and parent font sizes, viewport size, and the font metrics behind ch and ex — then expresses the same length in all sixteen units at once. It also solves fluid clamp() expressions from two viewport anchors. Everything is computed in your browser with plain arithmetic; nothing is uploaded and it works offline. Absolute units (pt, pc, in, cm, mm, Q) assume the CSS reference pixel of 1/96 inch.
- 100% free — no account needed
- Runs in your browser
- Nothing is uploaded
Frequently asked questions
Is CSS Units Converter really free?
Yes. CSS Units Converter is completely free on PureBrowser — every feature, with no account, no trial, and no credit card.
Does CSS Units Converter upload my data?
No. CSS Units Converter runs entirely inside your browser, so anything you type, paste, or open stays on your own device.
Do I need to sign up or install anything?
Neither. There is no account and nothing to download — open the page and CSS Units Converter is ready to use on desktop or mobile.
Does CSS Units Converter work offline?
Once the page has loaded, yes. All of the processing happens locally in your browser, so it keeps working without a connection.
More developer tools
Folder Structure Generator
Build folder structure diagrams, ASCII directory trees, and file tree visualizations for READMEs and docs.
.gitignore Generator
Generate merged .gitignore rules for your stack with one click.
JSON to TypeScript Interface
Convert JSON into TypeScript interfaces with inferred nested types.
Text to Slug Converter
Convert titles and phrases into clean SEO-friendly URL slugs.
UTM Builder
Build campaign URLs with UTM parameters for analytics tracking.
JSON Formatter & Validator
Validate, format, and minify JSON directly in your browser.