CSS Unit Converter
Nothing leaves your browser
Convert CSS units with the root font size and viewport you actually use, change every px in a stylesheet to rem, and generate fluid clamp() sizes.
Convert between CSS units the way a browser would, given the sizes they depend on. Everything is calculated in this tab.
What the relative units are measured against
What 1rem is. Browsers start at 16.
What 1em is.
What 100vw is.
What 100vh is.
Font sizes use the parent's; box sizes use the viewport.
Convert one value
A number, or a number with a unit such as 1.5rem.
Used when the value has no unit.
16px is 16px.
| Unit | Value | Copy |
|---|---|---|
| px | 16px | |
| rem | 1rem | |
| em | 1em | |
| % | 100% | |
| vw | 1.1111vw | |
| vh | 1.7778vh | |
| vmin | 1.7778vmin | |
| vmax | 1.1111vmax | |
| pt | 12pt | |
| cm | 0.4233cm | |
| mm | 4.2333mm | |
| in | 0.1667in |
Convert the values in CSS
7 values converted from px to rem.
Converted CSS
.card {
padding: 1.5rem 1rem;
border-radius: 0.5rem;
font-size: 1.125rem;
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
}
@media (min-width: 768px) {
.card { padding: 2rem; }
}
Comments, strings and url() are left alone. Inside @media conditions, rem and em follow the browser's default size, not your root, so they stay as written unless you ask. Percentages here use the setting above, which depends on the property they are used in.
Fluid size with clamp()
A size that grows smoothly with the viewport between two widths, and stops at the smallest and largest size.
clamp() value
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)
| Viewport width | Size |
|---|---|
| 320px | 16px (1rem) |
| 375px | 16.4583px (1.0286rem) |
| 768px | 19.7333px (1.2333rem) |
| 1024px | 21.8667px (1.3667rem) |
| 1280px | 24px (1.5rem) |
| 1440px | 24px (1.5rem) |
| 1920px | 24px (1.5rem) |