CSS Unit Converter

Enter a numeric value and choose a conversion mode. Set root or context font size in tool settings (default 16px).

  • Runs entirely in your browser
  • No data stored or sent to a server
  • Free forever — no signup
  • Instant conversion

Input and Output

Use the interactive encoder and decoder on this page to process your text.

Learn more about CSS

How to Convert CSS px, rem, and em Units

CSS Units

When to Convert CSS Units

Translate design handoff values between pixels and rem/em when building responsive layouts, auditing typography scales, or matching Figma specs to CSS custom properties rooted at 16px.

Root and Context Sizes

rem conversions use the root font size you enter (default 16px). em conversions use the context font size for the element — often the parent computed size. Adjust tool settings when your project uses a different base.

Developer Tips

  • User browser font settings change rem rendering — test in target browsers
  • Viewport units (vw/vh) require separate calculations not covered here
  • Round consistently with your design system grid

Frequently asked questions

Why is 16px not equal to 1rem?

It is when root font size is 16px. If html { font-size: 10px }, then 1rem equals 10px.

Does this convert vw or vh?

This tool supports px/rem/em pairs only — not vw or vh.