Pixels to VW Converter

How to use

1. 1Set the viewport size in pixels using the width and height fields, or tap a device preset (for example 1440 desktop or 375 mobile). Use Rotate to swap width and height for landscape.
2. 2Choose the unit: vw (viewport width), vh (viewport height), vmin (smaller side), or vmax (larger side).
3. 3Pick a direction: Pixels to viewport units to convert a px value, or Viewport units to pixels to go the other way.
4. 4In Single value mode, type a number to see the conversion, the formula, the viewport basis, and a copy-ready CSS declaration.
5. 5Switch to Batch list mode and paste a column of values to convert many at once. Lists mixing px with vw, vh, vmin, or vmax are handled per line.
6. 6Read the reference chart to map common pixel values to the active unit at your viewport, or copy the converted batch in one click. For values that scale between two viewports, use a clamp() expression instead.

About this tool

Pixels to VW Converter is a bidirectional CSS unit converter that translates between pixel values and viewport-percentage units (vw, vh, vmin, and vmax) entirely in your browser. A viewport unit is one percent of a viewport dimension, so the result depends on the screen you are designing for: that is exactly why this tool asks for a viewport size instead of guessing. Set the width and height (with one-tap presets for common devices: a 375px phone, a 390px large phone, a 768px tablet, a 1280px laptop, a 1440px desktop canvas, and a 1920px Full HD screen), or rotate the viewport to swap width and height for landscape. Pick the unit you need: vw is one percent of the viewport width, vh is one percent of the height, and vmin and vmax track the smaller and larger side so they stay stable when a device rotates. The conversion direction flips with a single tap. In the px to viewport-units direction the tool divides your pixel value by the relevant viewport dimension and multiplies by 100; in the reverse direction it multiplies the unit value by one percent of that dimension. Both directions show the input, the converted output, the exact formula used, the viewport dimension the unit is measured against, and a copy-ready CSS declaration so you can paste the result straight into a stylesheet. Single-value mode is for one number at a time. Batch mode accepts a whole column pasted from a spreadsheet or a design spec (one value per line, up to 200 lines) and returns a parallel column with a single Copy button; mixed lists are handled per line, so a value ending in px converts to your chosen unit while a value ending in vw, vh, vmin, or vmax converts back to pixels using its own unit. Numbers can use a comma or a period as the decimal separator, and unit suffixes are stripped automatically. A reference chart on the side renders common pixel values as the active unit at the current viewport so you can map a layout at a glance, and the chart updates the moment you change the viewport or the unit. This converter does one job well: a precise fixed conversion at a single viewport. For a value that should grow smoothly between two viewport sizes rather than at one fixed size, a CSS clamp() expression is the right tool, and this page links to the Clamp Generator and the Fluid Type Scale Generator for that. Useful for translating Figma or Sketch hero and section sizes into vw or vh, sizing full-bleed and full-height blocks, checking what 100vh resolves to on a specific device, porting fixed pixel layouts to responsive units, and sanity-checking a viewport value a teammate used. The math runs entirely on your device, so the values you type here never leave your browser. One caveat worth remembering: a pure viewport font size ignores the reader preferred text size, so prefer rem for body copy and reserve vw and vh for layout that is meant to scale with the window.

Free to use. Works in your browser. No signup, no login.