CSS Unit Converter
Convert between CSS units px, rem, em, and vw instantly. Set custom root font size and viewport width. Free, runs in your browser.
How to Use
- Enter a numeric value in the Value field.
- Select the source unit (px, rem, em, or vw).
- All four unit conversions update instantly below.
- Optionally adjust Root Font Size or Viewport Width to match your project settings.
- Click Copy next to any result to copy it to your clipboard.
Common Conversions
With the default settings (root font size 16px, viewport 1920px):
16px=1rem=1em=0.833vw1rem=16px100vw=1920px=120rem
When to Use Each Unit
- px — absolute size, consistent across devices. Good for borders, shadows, and fine details.
- rem — scales with the user’s browser font size setting. Preferred for font sizes and spacing in accessible designs.
- em — relative to the parent element’s font size. Useful for component-scoped sizing.
- vw — relative to viewport width. Good for fluid typography and full-bleed layouts.
FAQ
What CSS units does this tool support?
px, rem, em, and vw. Enter a value in any unit and see all four results at once.
What is rem and how is it calculated?
rem (root em) is relative to the root element's font size. By default that is 16px, so 1rem = 16px. You can change the root font size in the configuration.
How is vw calculated?
vw is 1% of the viewport width. With a viewport of 1920px, 1vw = 19.2px. Adjust the viewport width field to match your target layout.
What is the difference between rem and em?
rem is always relative to the document root font size. em is relative to the current element's font size, which varies in nested structures. This tool uses a simplified model where em = rem (both relative to root font size).
Is my data sent to a server?
No. All conversions run entirely in your browser. Nothing leaves your machine.