CSS Unit Converter
Unit
Settings
px
16
rem
1
em
1
%
100
vw
0.8333
vh
1.4815
svw
0.8333
svh
1.4815
lvw
0.8333
lvh
1.4815
dvw
0.8333
dvh
1.4815
How to Use
Enter a numeric value and pick the source CSS unit. The converter instantly shows equivalent values in every other unit. Adjust the root font size, parent font size, and the large/small viewport dimensions in the settings panel to match your project's environment.
Unit Reference
CSS has absolute units (px) and relative units (everything else). Viewport units come in four flavors that describe what counts as 'the viewport' when the browser UI is showing or hidden.
- px Pixel — absolute
- One device-independent pixel. The baseline that every other unit is converted through.
- rem Root em — relative to root font size
- 1rem equals the font size of the <html> element (default 16px). Use it for global typography and spacing scales.
- em em — relative to parent font size
- 1em equals the font size of the parent element. Compounds when nested, so use it for component-local sizing.
- % Percent — relative to parent
- For font-size, % is relative to the parent's font size. For width/height, it is relative to the parent's computed length.
- vw vw — viewport width
- 1vw equals 1% of the viewport width. In modern browsers vw matches lvw (the large viewport).
- vh vh — viewport height
- 1vh equals 1% of the viewport height. In modern browsers vh matches lvh.
- svw svw — small viewport width
- 1svw is 1% of the smallest possible viewport width (when all browser UI is showing). Stable while the user scrolls.
- svh svh — small viewport height
- 1svh is 1% of the smallest possible viewport height (with address bar and toolbar visible). Use it on mobile when you want layout that never overflows the visible area.
- lvw lvw — large viewport width
- 1lvw is 1% of the largest possible viewport width (when browser UI is collapsed).
- lvh lvh — large viewport height
- 1lvh is 1% of the largest possible viewport height (when browser UI is hidden). Useful for full-bleed hero sections.
- dvw dvw — dynamic viewport width
- 1dvw is 1% of the current viewport width. Updates live as the browser UI changes.
- dvh dvh — dynamic viewport height
- 1dvh is 1% of the current viewport height and animates as the address bar shows or hides. The modern replacement for vh on mobile.
Conversion Formulas
Every conversion goes through pixels as the intermediate unit:
- px → px: value (no change)
- rem → px: value × root font size
- em → px: value × parent font size
- % → px: (value × parent font size) / 100
- vw / lvw / dvw → px: (value × large viewport width) / 100
- svw → px: (value × small viewport width) / 100
- vh / lvh / dvh → px: (value × large viewport height) / 100
- svh → px: (value × small viewport height) / 100
Common Use Cases
- Translating designer pixel specs into responsive rem or em values.
- Sizing full-screen hero sections with vh, lvh, or dvh.
- Building mobile UIs that never get clipped by the address bar by using svh.
- Migrating a legacy CSS codebase from px to rem for better accessibility.
- Verifying that your design system produces consistent spacing scales.
Tips
- Most browsers default to a 16px root font size, but users can change it in their settings.
- Use rem for global sizing and em for component-relative sizing that should scale with its parent.
- On mobile, prefer dvh over vh for full-screen layouts so the design adapts as the browser UI shows and hides.
- Use svh when you want a layout that always fits even with the address bar visible (e.g. sticky bottom bars).
- Avoid deep nesting of em-based sizes — values compound at every level.
Privacy
All conversions happen in your browser. No data is sent to any server.