Convert CSS units — px, rem, em, vw, vh
Convert between px, rem, em, vw, vh, and %. Set your root font size and viewport width so rem and viewport units match your design system.
rem uses root font size; vw and % use the viewport width reference.
Design tokens often mix px specs with rem code. This page bridges the two without opening a calculator.
Viewport units depend on device width — set the viewport field to the breakpoint you are designing for.
How to convert
- Enter a number and pick from/to units
- Confirm root font size and viewport width
- Copy the result into your CSS
Why use this
- Avoid off-by-one rem mistakes when root font size is not 16.
- Quickly sanity-check vw/vh against a layout width.
- No account — paste and go.
Scenarios
- Figma px spacing → rem in CSS
- Check how wide 40vw is on a laptop mock
- Teach rem vs em with a live number
Tips
- em uses the same parent size as root here for simplicity; adjust if your component font differs.
- Round-trip conversions can show tiny float noise — CSS usually does not need four decimals.
Examples
| Input | Output | Note |
|---|---|---|
| 16px → rem (root 16) | 1rem | — |
| 50vw at 1280px wide | 640px | — |
CSS units FAQ
- What is rem based on?
- The root font size you set here (usually 16px). Change it if your html { font-size } differs.
- Is % the same as vw?
- Not always. Here % uses the same reference width as the viewport field unless you change the mental model — treat it as container-width approximation.