CSS Unit Converter
Convert px, rem, em, %, vw, and vh.
Category: Converters
When to use?
Use it to convert design px values to rem, em, vw, vh, or the reverse.
How to use
- Enter the value and its current unit.
- Enter the base font and viewport size.
- Check the result in all units.
Input Explanation
rem/em/% are based on the base font size; vw/vh are based on viewport width/height.
Calculation Basis
It normalizes the input to px first, then converts to each CSS unit using the base font and viewport size.
Usage Examples
- Convert responsive CSS - Compare CSS units on one screen.
- Convert design specs - Convert design px values to relative units like rem or vw.
- Build unit intuition - Compare how the same value looks across units.
Examples
- 16px, base 16px → 1rem, 1em, 100%
- 32px, base 16px → 2rem, 2em, 200%
Cautions
- Malformed input can cause parsing errors or broken output.
- A mismatched base font/viewport will shift all converted values.
FAQ
How is this different from the px ↔ rem converter?
Besides px and rem, it also converts em, %, vw, and vh.
What are vw and vh based on?
vw is 1% of viewport width; vh is 1% of viewport height.
What is the basis for rem conversion?
The root font size, defaulting to 16px usually.
How do em and rem differ?
rem is always based on the root font size; em is based on the element's font size.
Related Tools
- px ↔ rem Converter - Convert px and rem values bidirectionally based on a root font size.
- CSS vw Unit Converter - Convert px to viewport-width vw units, or the reverse.
- CSS clamp() Generator - Auto-generate a CSS clamp() function from min/max values and a viewport range.
- CSS Formatter - Neatly align CSS code by rules and properties.
- URL Encode / Decode - Encode text into URL-safe form (%XX) or decode an encoded URL back to text.
- Base64 Converter - Encode text to Base64 or decode a Base64 string back to text.