CSS Unit Converter
Convert between px, rem, and em units with live bidirectional conversion
Configuration
Set the base font size for rem calculations
Conversion Formulas:
- rem: value × base-font-size → px
- em: value × parent-font-size → px
- px: fixed pixel value
Pixel (px)
Absolute screen/device pixels
= —rem
= —em
Relative (rem)
Relative to root element's font size
= —px
= —em
Element (em)
Relative to parent element's font size
= —px
= —rem
When to Use Each Unit
px (Pixels): Best for fixed elements like borders, shadows where exact sizing is needed
rem (Root EM): Preferred for responsive typography and spacing—scales with root font size
em (EM): Useful for components that should scale with their container, like padding within buttons
Quick Tips
•Type in any field to see instant conversions in the others
•Click the refresh icon next to a converted value to quickly swap that value
•Default base font size is 16px—adjust for your design system
•Use the copy button to grab values for your CSS code