What is a PX to VH converter and why use it?
A px to vh converter translates a fixed pixel size into vh, a CSS unit equal to 1% of the viewport height. One vh is one hundredth of the browser window's height, so 50vh is always half the visible screen, whatever the device.
Designers hand over mockups in pixels, but full-screen hero sections, sticky panels and modals are usually built with vh so they scale with the screen. Converting by hand is easy to get wrong, especially when you switch between a 1080p desktop and a 768px laptop. This tool does the maths and lets you copy the result straight into your stylesheet.
How to use this tool
Enter the pixel value
Type the size in pixels that you want to convert, for example the height of an element in your design file.
Set the viewport height
Enter the viewport height in pixels, or pick a preset such as 1080 or 768. This is the height of the screen or browser window you are designing for.
Copy the result
The vh value updates instantly. Press Copy vh value and paste it into your CSS.
How PX to VH is calculated
Because 1vh equals 1% of the viewport height, you divide the pixel value by the viewport height and multiply by 100. The result depends entirely on the viewport height, which is why the same 300px is 27.78vh on a 1080px screen but 39.06vh on a 768px screen.
Use the inner height of the browser window, not the monitor resolution. Browser toolbars take up space, so a 1080px monitor often has a viewport of about 950px.
vh = (px ÷ viewport height) × 100px = (vh ÷ 100) × viewport height| Pixels | At 1080px height | At 768px height |
|---|---|---|
| 50px | 4.63vh | 6.51vh |
| 100px | 9.26vh | 13.02vh |
| 200px | 18.52vh | 26.04vh |
| 300px | 27.78vh | 39.06vh |
| 500px | 46.3vh | 65.1vh |
| 540px | 50vh | 70.31vh |
| 800px | 74.07vh | 104.17vh |
| 1080px | 100vh | 140.63vh |
FAQ
How do I convert px to vh?
Divide the pixel value by the viewport height in pixels 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.
Which viewport height should I use?
Use the inner height of the window your users will most likely have. If you are unsure, test a few presets, or check window.innerHeight in your browser console.
Why does 100vh look too tall on mobile browsers?
Mobile browsers hide and show the address bar as you scroll, so 100vh can be taller than the visible area. The dvh and svh units were added to CSS to handle this.
Is px to vh the same as px to vw?
The formula is the same but vw uses the viewport width instead of the height. Divide by the viewport width and multiply by 100.