VW calculator
PX to VW Converter
Type a px value from your design and get vw instantly. Your base width and settings are saved automatically.
Common values
Click a value to copy it in vw.
Batch CSS converter
Paste CSS and every value converts instantly. @media conditions are left untouched.
Calculate in SCSS or CSS
Functions with your base width baked in. Paste them into your project.
SCSS
CSS
PX → VW tables by base width
Ready-made px → vw tables for the artboard widths designers use most.
More unit converters
The complete guide to PX to VW conversion
With devices ranging from small phones to ultra-wide monitors, viewport-relative units like vw have become the backbone of fluid, responsive layouts. This converter turns the px values in your design into vw based on your design's width.
1. What is the vw unit?
1vw equals 1% of the browser viewport width. On a 1000px-wide screen 1vw is 10px; shrink the window to 500px and 1vw becomes 5px. Elements scale in proportion to the screen without a stack of media queries.
2. How to use this tool
- Enter your artboard width (e.g. 1920, 1440, 375) in Base width, or pick a preset.
- Type a value into PX → VW and the result appears instantly. Click the result to copy it.
- To convert many values at once, paste your code into the Batch CSS converter.
3. Tips
- Keep hairlines like 1px borders and shadows in px — they render crisper. Leave "Keep ≤1px as px" on.
- For font sizes, pair vw with min and max sizes using the clamp() generator.
- Pixel values in @media conditions refer to the screen width and must not become vw. The batch converter skips them automatically.
Frequently asked questions
How do I convert px to vw?
vw = (px value ÷ reference viewport width) × 100. On a 1920px design, 96px equals (96 ÷ 1920) × 100 = 5vw.
What viewport width should I use as the base?
Use the artboard width of your design file. Desktop mockups are usually 1920px or 1440px; mobile mockups are usually 360px, 375px or 390px.
Is it safe to use vw for font sizes?
It works, but text can become too small on narrow screens. Use CSS clamp() to set minimum and maximum sizes, and keep accessibility in mind — vw-only fonts ignore browser zoom.
Can I convert a whole CSS file to vw at once?
Yes. Paste your CSS into the batch converter and every px value converts instantly. Pixel values inside @media conditions are left alone, and you can keep hairline values like 1px borders in px. The reverse (vw → px) is also supported.
Are my settings remembered?
Yes. Your base width, decimal places and batch options are saved in your browser and restored on your next visit. Nothing is sent to a server.