Free PX to VW / VH Converter
Convert pixel values into viewport units (vw and vh) so your layouts scale fluidly with the screen. Enter the design viewport width and height, plus the pixel value you want to convert.
Static sizing is usually better expressed in rem — the Px to Rem Converter handles that — and CSS to Tailwind turns either unit into utility classes.
How to use the PX to VW
- 1 Enter the pixel value and the viewport width you are designing against — often the width in your design file.
- 2 Read the equivalent in vw, and in vh against the viewport height.
- 3 Copy the value into your stylesheet, or use it inside a clamp() to cap how far it can grow.
- 4 Adjust the reference width to check how the value behaves at other breakpoints.
How to Use
Set the viewport size your design targets (commonly 1440×900 or 1920×1080), type a pixel value, and get the equivalent vw/vh plus the reverse conversion from vw to px.
- PX to VW and PX to VH
- VW/VH back to pixels
- Configurable design viewport size
- Common breakpoint presets
- Copy the CSS value
What are viewport units?
1vw equals 1% of the viewport width and 1vh equals 1% of the viewport height. Using them lets text, spacing and element sizes scale smoothly with the screen instead of jumping between fixed breakpoints. Use clamp() with viewport units for the best of both worlds.
Frequently asked questions
What does 1vw actually mean?
One percent of the viewport width, so the value changes as the window resizes. On a 1440px viewport, 1vw is 14.4px; on a 375px phone it is 3.75px. That is what makes it useful for fluid type and spacing, and dangerous for anything that must stay fixed.
Why does using vw cause horizontal scrolling?
Because 100vw includes the width of the vertical scrollbar, while the page content area does not. Setting an element to 100vw on a page that scrolls vertically therefore overflows slightly. Use 100% instead for full-width elements, and keep vw for scaling values.
When should I use clamp() with viewport units?
Almost always. A raw vw value can become unreadably small on a phone or absurdly large on a wide monitor. clamp(1rem, 2.5vw, 2rem) gives fluid scaling between a floor and a ceiling, which is the pattern behind most modern fluid type scales.
Related Unit & Data Converters
You might also need
Tools from other categories that people pair with the PX to VW: