Viewport Units Calculator
Convert between viewport units and pixels for a screen of any size. 1vw is one percent of the viewport width and 1vh is one percent of the height, so the result depends on the viewport dimensions you enter.
How to convert viewport units
- Enter the viewport width and height in pixels.
- Choose the unit (vw or vh) and the direction of conversion.
- Type your value and copy the converted px or viewport-unit result.
Examples
Convert vw to pixels
50vw at 1440px wide
720px
Convert pixels to vw
360px at 1440px wide
25vw
Frequently asked questions
What are vw and vh units?
vw and vh are viewport-relative length units. 1vw equals one percent of the viewport width and 1vh equals one percent of the viewport height, so 100vw spans the full width and 100vh spans the full height.
How do I convert vw to px?
Multiply the vw value by the viewport width and divide by 100. On a 1440px wide viewport, 50vw is 50 times 1440 divided by 100, which is 720px. To go from px to vw, divide by the width and multiply by 100.
What is the difference between vw and vh?
vw is measured against the viewport width while vh is measured against the viewport height. The same number resolves to different pixel sizes unless the viewport is a perfect square.
What are vmin and vmax?
vmin is one percent of the smaller viewport side and vmax is one percent of the larger side. This tool focuses on vw and vh, but you can find vmin by using whichever of width or height is smaller.
Why does 100vw sometimes cause horizontal scroll?
On some browsers 100vw includes the width taken by a vertical scrollbar, so an element set to 100vw can be slightly wider than the visible area and trigger a horizontal scrollbar. Using percentages on a block element avoids this.
Related tools
PX to REM Calculator
Convert px to rem and rem to px with any root font-size. Set the root, type a value, and copy the result for clean, scalable CSS typography.
Type Scale Calculator
Generate a modular type scale from a base size and a ratio. Get px and rem for every step, from small print to display headings. Free and exact.
CSS clamp() Calculator
Generate a responsive CSS clamp() for fluid font sizes and spacing. Set a min and max size with viewport breakpoints and copy the clamp() value instantly.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
ASCII Table
Full ASCII table for all 128 codes with decimal, hex, octal and binary values, character names and descriptions. Search by code, hex or character.
Aspect Ratio Box Generator
Generate CSS for a responsive aspect-ratio container. Use the modern aspect-ratio property or the padding-top fallback, then copy the ready code.