CSS Unit Converter
Convert between px, em, rem, %.
Input
Result
What is a CSS Unit Converter?
A CSS Unit Converter helps web developers convert between different CSS measurement units such as pixels (px), ems, rems, and percentages. It is essential for creating responsive designs that work across different screen sizes and devices.
How to convert CSS units manually (the formula)
To convert px to em, divide by the base font size: em = px ÷ base. To convert em to px, multiply: px = em × base. For rem, the base is always the root font size (typically 16px). For percentages: % = (target ÷ parent) × 100.
Example calculation
Convert 32px to em with a base of 16px: 32 ÷ 16 = 2em. Convert 1.5rem to px: 1.5 × 16 = 24px. Convert 48px to percentage with a parent of 200px: (48 ÷ 200) × 100 = 24%.
Common mistakes
- Forgetting the base font size — em and rem calculations require knowing the base. Without it, conversions are incorrect.
- Confusing em and rem — em compounds with nested elements; rem always references the root. Using the wrong one leads to unexpected sizing.
- Ignoring browser defaults — The default base font size is 16px, but users can change it. Test your design at different base sizes.
Frequently asked questions
What CSS units are supported?
px, em, rem, and percentage (%).
How do you convert px to em?
Divide the pixel value by the base font size (typically 16px).
What is the difference between em and rem?
em is relative to the parent element; rem is relative to the root element.
What base font size does the tool use?
The default is 16px, but you can adjust it.
Is this free?
Yes, completely free.
Does it work on mobile?
Yes, works on any device.