What is a CSS unit converter and why use it?
A CSS unit converter translates a size from one CSS unit into another. Pixels (px) are fixed, rem scales with the root font size so text respects a user's browser settings, vh is 1% of the viewport height, which suits full-screen sections, sticky panels and modals, and vw is 1% of the viewport width, which suits fluid headings and full-width layouts.
Design files usually hand over pixels, while a well-built stylesheet prefers rem for type and spacing and vh or vw for screen-relative layout. Converting by hand is easy to get wrong, especially when your base font size is not 16px or you switch between a 1080px desktop and a 768px laptop. This tool does the maths in both directions and lets you copy the result straight into your CSS.
How to use this tool
Pick your units
Choose the unit you are converting from and the unit you want, from px, rem, vh and vw. The swap button flips them in one click.
Enter the value and context
Type the number to convert. If rem is involved, set the base font size (16px by default). If vh is involved, set the viewport height in pixels, and if vw is involved, set the viewport width. Presets such as 1080 high or 1440 wide are one click away.
Copy the result
The converted value updates as you type, with the formula underneath. Press Copy and paste it into your stylesheet.
How CSS units are converted
Every conversion goes through pixels. 1rem equals the root font size (16px in most browsers), 1vh equals one hundredth of the viewport height, and 1vw equals one hundredth of the viewport width. That is why the same 300px is 27.78vh on a 1080px tall screen but 39.06vh on a 768px one, and 20.83vw on a 1440px wide screen.
For vh and vw, use the inner size of the browser window rather than the monitor resolution. Toolbars take up space, so a 1080px tall monitor often has a viewport of about 950px, and a vertical scrollbar makes the usable width of vw slightly smaller than the window.
rem = px ÷ base font sizepx = rem × base font sizevh = (px ÷ viewport height) × 100px = (vh ÷ 100) × viewport heightvw = (px ÷ viewport width) × 100px = (vw ÷ 100) × viewport width| Pixels | rem | vh at 1080px | vw at 1440px |
|---|---|---|---|
| 8px | 0.5rem | 0.74vh | 0.56vw |
| 12px | 0.75rem | 1.11vh | 0.83vw |
| 16px | 1rem | 1.48vh | 1.11vw |
| 24px | 1.5rem | 2.22vh | 1.67vw |
| 32px | 2rem | 2.96vh | 2.22vw |
| 48px | 3rem | 4.44vh | 3.33vw |
| 64px | 4rem | 5.93vh | 4.44vw |
| 100px | 6.25rem | 9.26vh | 6.94vw |
| 300px | 18.75rem | 27.78vh | 20.83vw |
| 540px | 33.75rem | 50vh | 37.5vw |
FAQ
How do I convert px to rem?
Divide the pixel value by the base font size. With the browser default of 16px, 24px is 24 ÷ 16 = 1.5rem.
How do I convert rem to px?
Multiply the rem value by the base font size. At 16px, 1.5rem is 1.5 × 16 = 24px.
How do I convert px to vh?
Divide the pixel value by the viewport height and multiply by 100. For example, 540px on a 1080px viewport is (540 ÷ 1080) × 100 = 50vh.
What is 100vh in pixels?
100vh equals the full viewport height. On a 1080px tall viewport that is 1080px, and on a 768px tall viewport it is 768px.
How do I convert px to vw?
Divide the pixel value by the viewport width and multiply by 100. For example, 360px on a 1440px wide viewport is (360 ÷ 1440) × 100 = 25vw.
How do I convert vw to px?
Divide the vw value by 100 and multiply by the viewport width. At 1440px wide, 50vw is (50 ÷ 100) × 1440 = 720px.
What is the difference between vh and vw?
vh is 1% of the viewport height and vw is 1% of the viewport width. Use vh for things tied to screen height, such as hero sections, and vw for things that should scale with the width, such as fluid headings.
Should I use px, rem, vh or vw?
Use rem for font sizes and spacing so they respect user font settings, px for hairlines and borders that must stay exact, vh for sizes tied to the screen height, and vw for sizes tied to the screen width.
What if my base font size is not 16px?
Change the base font size field to match your html font-size. Some projects set 62.5% so that 1rem equals 10px, which makes the maths easier.
Can I convert between rem, vh and vw directly?
Yes. The tool converts through pixels, so you can pick any pair of px, rem, vh and vw and set the base font size and the viewport size.