CSS Unit Converter
Unit options
rem uses the base font size. em and % use the parent size. vw and vh use the viewport width and height.
Live preview
About CSS Unit Converter
CSS Unit Converter helps convert common CSS units like px, rem, em, %, vw, and vh. It is useful when adapting typography, spacing, breakpoints, and responsive layouts.
You can change the base font size, parent size, viewport width, and viewport height to match your project context instead of relying on fixed assumptions.
How to use it
- Enter the value you want to convert.
- Choose the source and target CSS units.
- Adjust base font size, parent size, or viewport values when needed.
- Copy the converted value or CSS rule.
Tips
- Use 16px as the common default base size for rem conversions.
- Use parent size when converting em or percent values.
- Use viewport width for vw and viewport height for vh conversions.
- Check the preview to understand the visual scale of the converted value.
CSS unit conversion checks before replacing a value
Equal-looking values are not always equivalent because relative units depend on font metrics, viewport dimensions, containers, or the current property.
Identify the reference
Confirm whether percentages, em, rem, viewport, and container units resolve against the parent, root, element, or query container.
Avoid false precision
Round only as far as the design requires and test whether accumulated rounding affects grids, transforms, or repeated dimensions.
Test responsive behavior
Compare the converted value across breakpoints, orientation changes, browser UI resizing, zoom, and different root font sizes.
Choose units by intent
Use units that express the relationship you need instead of converting everything to pixels merely because the current rendering matches.
Related tools
You may also find these tools useful.