What is a VH to PX converter and why use it?
A vh to px converter shows the pixel size behind a viewport height value. Since 1vh is 1% of the browser window's height, the pixel result changes with every screen.
It is useful for debugging layouts, writing media queries, checking that a hero section fits above the fold, and translating CSS back into design specs that are written in pixels.
How to use this tool
Enter the vh value
Type the viewport height units, for example 80 for 80vh.
Set the viewport height
Enter the viewport height in pixels or choose a preset.
Copy the pixels
The pixel value appears instantly. Press Copy px value to use it.
How VH to PX is calculated
Divide the vh value by 100 to get a fraction of the screen, then multiply by the viewport height in pixels. 25vh on a 1080px screen is a quarter of 1080, which is 270px.
The result is only exact for the viewport height you enter. On a different device, the same CSS value renders at a different pixel size.
px = (vh ÷ 100) × viewport height| Viewport height units | At 1080px height | At 768px height |
|---|---|---|
| 1vh | 10.8px | 7.68px |
| 10vh | 108px | 76.8px |
| 25vh | 270px | 192px |
| 50vh | 540px | 384px |
| 75vh | 810px | 576px |
| 100vh | 1080px | 768px |
FAQ
How do I convert vh to px?
Multiply the vh value by the viewport height and divide by 100. For example, 50vh on a 900px viewport is (50 ÷ 100) × 900 = 450px.
How many pixels is 1vh?
1vh is 1% of the viewport height. On a 1080px viewport that is 10.8px, and on a 768px viewport it is 7.68px.
Is vh relative to the screen or the browser window?
To the browser window's viewport, the area where the page is drawn, not the physical monitor. Toolbars and dev tools reduce it.
Does vh update when I resize the window?
Yes. vh is recalculated whenever the viewport changes, so elements sized in vh grow and shrink with the window.