Free tool No sign-up
CSS Unit Converter
Convert between every CSS unit — px, rem, em, pt, vw, vh, %, cm, in, deg, rad, ms, dpi — with live context controls and copy-on-click.
cssunitsconverterremvw
Why a unified unit converter?
One number, every unit
Stop juggling four converter tabs. Type a value once and see px, rem, em, pt, vw, vh, %, cm, in, and more — all updating live and tied to the same context.
Context-aware math
rem depends on the root font size, em on the parent, % on the container, vw/vh on the viewport. Tweak each value in the sidebar and watch the conversions react instantly.
Beyond just length
Time (ms ↔ s), angles (deg ↔ rad ↔ turn ↔ grad), and resolution (dpi ↔ dppx ↔ dpcm) — every CSS unit family in one place, no manual formulas.
Build a sane unit strategy
Seeing 24px as 1.5rem, 25%, 1.667vw, and 18pt at the same time makes it obvious which unit fits your component — fixed, fluid, or proportional.
How to use this converter
01
Pick a category
Length / Size, Time, Angle, or Resolution. The right panel only shows units valid within the same physical or temporal dimension — no nonsense conversions.
02
Enter the source value
Type the number, choose the source unit. The converter resolves it to a canonical form (px, ms, turn, dppx) and re-derives every other unit from that anchor.
03
Tune the context (size only)
Set base font (rem), parent font (em), viewport width × height (vw/vh/vmin/vmax), and container width (%). Values update across every cell as you slide the sliders.
04
Click any cell to copy
Each result card is a copy button — get exactly the unit your CSS rule needs. Active source unit is highlighted; the cheat sheet at the bottom is always visible for quick lookups.
Common length conversions
| Input | rem | em | pt | vw (1440) | % (1024) |
|---|---|---|---|---|---|
16 px | 1 rem | 1 em* | 12 pt | 1.11 vw | 1.56 % |
24 px | 1.5 rem | 1.5 em* | 18 pt | 1.67 vw | 2.34 % |
48 px | 3 rem | 3 em* | 36 pt | 3.33 vw | 4.69 % |
1 in | 6 rem | 6 em* | 72 pt | 6.67 vw | 9.38 % |
1 cm | ~2.36 rem | ~2.36 em | ~28.35 pt | ~2.62 vw | ~3.69 % |
1 vmin | ~0.56 rem | ~0.56 em | 6.75 pt | 0.625 vw | ~0.88 % |
Assumes 16 px base font, 1440 × 900 viewport, 1024 px container.
*em = parent font 16 px.
Units in practice
Mixed
/* Mix units intentionally */
.card {
/* layout — fluid */
width: clamp(280px, 40vw, 560px);
padding: 1.5rem; /* 24px at 16px base */
/* typography — proportional */
font-size: 1rem; /* 16px */
line-height: 1.5; /* unitless = relative to font-size */
/* details — pixel-perfect */
border: 1px solid #ddd;
border-radius: 12px;
} Angle
/* Angles — pick the unit that reads best */
.spinner { transform: rotate(0.25turn); } /* = 90deg */
.gradient { background: linear-gradient(45deg, ...); }
.dial { transform: rotate(π rad); } /* JS: Math.PI rad */
.fine-tune { transform: rotate(0.5grad); } /* = 0.45deg */ Time
/* Time — both units are valid, ms is more common */
.fade-fast { transition: opacity 150ms ease-out; }
.fade-soft { transition: opacity 0.4s ease-in-out; }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.live-dot { animation: pulse 2s infinite; } /* = 2000ms */ Pro tips
01
rem for layout, em for components
Use rem so spacing & type scale with user preferences. Use em inside reusable components so padding, gap, and line-height scale with the component's own font-size.
02
pt and pc are print-era leftovers
In CSS, 1 pt = 1.333 px and 1 pc = 16 px — fixed conversions, not "physical" inches. Stick to px / rem on screen and reach for pt / cm only for @media print rules.
03
% needs a parent with a size
percentage values resolve against a containing block. If the parent has no explicit width, height, or font-size, your % collapses to auto. Set the container or use viewport units instead.
04
Mind sub-pixel rounding
Browsers round to physical pixels. 0.999rem may render as 16 px on one device and 15 px on another. For crisp 1-px lines, hard-code px; for everything else, embrace fractional values.