Convert vw to px Viewport width ↔ Pixels Free Online Secure
Type a value in vw and read it in px at once. The arithmetic happens in your browser, nothing is sent anywhere, and what the conversion depends on is written out below rather than assumed.
Nothing uploaded
Common sizes — Convert vw to px
| vw | px |
|---|---|
| 0.5 | 7.2 |
| 1 | 14.4 |
| 2 | 28.8 |
| 5 | 72 |
| 10 | 144 |
| 25 | 360 |
| 50 | 720 |
| 100 | 1440 |
Where these units come from
The pixel in CSS is not the pixel in your screen. When displays stopped having a predictable density, a page measured in real pixels became a page that shrank as screens got sharper, so the CSS pixel was redefined as a reference length: about 1/96 of an inch seen at a comfortable reading distance. Everything else on this page is built on that. The em is older than the web — in metal type it was the width of a cast block, named after the capital M — and in CSS it means the font size in force, which is why it changes as you nest elements. The rem was added to escape exactly that: it is the em of the root element and never compounds. The vw arrived with responsive design: one hundredth of the viewport's width, whatever that turns out to be.
Where you meet them
These are the units of every stylesheet. Pixels size borders, shadows and anything that should not scale; rem sizes type, spacing and layout, so that one change at the root resizes a whole interface; em sizes things that should follow their own text, like the padding inside a button; vw sizes headings and hero sections that must fill the screen on any device. Converting between them is the daily arithmetic of turning a design handed over in pixels into a stylesheet that scales.
Questions people ask
Why is 16 px the usual starting point?
Because that is the default text size in every major browser, and a stylesheet that does not override it inherits it. One rem therefore equals 16 px on a default setting, which is where the familiar conversions come from: 0.5 rem is 8 px, 1.5 rem is 24 px. If a user has enlarged the default in their browser settings, those same rem values grow with it — which is precisely the point of using them.
Should I use rem or em?
Rem for anything that should follow the page as a whole — type scale, spacing, layout widths — because it is measured from the root and never accumulates. Em for anything that should follow the text it sits in: the padding of a button, the gap beside an icon, the indent of a quotation. The common mistake is nesting em-sized elements inside one another, where 1.2 em inside 1.2 em becomes 1.44, and then 1.73, until the text at the bottom of the page is twice the size intended.
Is the answer exact?
Where both units are defined in terms of one another by whole numbers, yes — the page says so above the figure, and the only rounding is in how many digits are shown. Where the ratio has no finite decimal, the page shows twelve significant digits and says the relation is approximate rather than pretending otherwise.
Does anything I type leave my device?
No. The arithmetic runs in your browser; nothing is uploaded and there is no server to upload it to. Load the page once and it keeps working with the network switched off.
Why you convert vw to px
A stylesheet says font-size: 5.2vw on a hero title, margin-top: 8vw on a section and width: 42vw on a picture. They are flexible values, and they do not tell you what is on the screen. How big is the title on a phone? How wide is the picture on a laptop? Does the margin look right at 1920 pixels? To find out you convert vw to px: you multiply the number by the width of the window and divide by one hundred, and read the answer in the unit that designers, testers and clients use. It is what you do when you review fluid code, check a build against a mockup or explain to a colleague why the heading looks small on a narrow screen.
What makes the conversion different from rem or em is that the multiplier is the window itself. One vw is one hundredth of the viewport width, so 5.2vw is 52 px in a window 1000 px wide, 18.7 px in a phone 360 px wide and 99.8 px on a wide monitor of 1920. There is no default to fall back on, and the width changes when the reader rotates the phone or drags the window. The converter therefore asks for the width, shows it beside the answer and starts at 1440 px, a width designs are often drawn at.
The calculation happens in your browser, and nothing is uploaded. Below you will find the formula, what the conversion keeps and cannot keep, how to read a fluid stylesheet at several widths, the trap of the scrollbar, the accessibility problem of text in pure vw, and a few habits that keep fluid code understandable.
The formula and the width
px equals vw multiplied by the width, divided by one hundred
The formula is px = vw × width ÷ 100. At a width of 1440 px, 10 vw becomes 144 px, 5 vw becomes 72 px and 1.667 vw becomes 24 px. The page prints the width beside the result, so a line such as 10 vw = 144 px (1440 px) tells you what was assumed. To see another screen, change the width and read the result again.
Which widths to try
A useful set to check is 360 or 390 for phones, 768 for a portrait tablet, 1024 for a small laptop, 1440 for a typical laptop or desktop and 1920 for a full-HD monitor. Type each in the width field and note the result. Five readings show you the whole range of a value, and any extreme jumps out.
Using the width of the actual window
In your browser's developer tools, the device toolbar shows the width of the window in pixels. Use that number to compare what the page does with what the converter says. If they agree, your reading of the stylesheet is right.
What the conversion keeps and what it cannot
It keeps the share of the screen
One vw is one hundredth of the viewport width, so a size written in vw grows and shrinks with the window instead of staying put. The pixel value you get is that share made concrete for one particular width.
It cannot give a default
Unlike rem, vw has no default. A browser gives the root font size 16 px when nobody says otherwise, so a rem page can start from a real number; the viewport width is simply however wide the reader's window is, and it changes when they turn the phone. The 1440 px here is a width designs are often drawn at, a habit and not a standard. Type your own.
Rounding
Multiplying by the width and dividing by 100 can produce decimals. 6.67 vw at 1440 px is 96.048 px. Browsers handle fractional pixels, but if you need a whole number for a design file, round and note that the rounding is yours.
Reading a fluid stylesheet
Take three widths and write the results
Choose a narrow, a middle and a wide width, for example 375, 1024 and 1920. For each important vw value in the stylesheet, convert vw to px at each width and write the three numbers in a note. A heading of 5.2 vw gives 19.5, 53.2 and 99.8 pixels. Seen this way, you know whether the heading is readable at the narrow end and not overwhelming at the wide end.
Look for clamp
Well-written fluid code puts limits around vw with clamp(min, preferred, max). If you see clamp(2rem, 1rem + 4vw, 6rem), the size grows between 32 and 96 px and holds at both ends. When you convert the vw part, remember that it is only the middle of the range, and the limits decide what happens at the edges.
Check the extremes
The risky widths are the smallest and the largest. At 320 px a heading of 6 vw is 19 px; at 2560 it is 154 px. If neither looks acceptable and there is no clamp, the stylesheet needs limits.
Traps when you convert vw to px
The scrollbar
On desktop browsers, the viewport width used for vw includes the width of the vertical scrollbar. So 100vw is a little wider than the visible area when the page scrolls, by around 15 to 17 pixels on many systems. The pixel value you compute is therefore slightly larger than the visible width it appears to represent. On phones, where scrollbars overlay the page, the effect is absent.
Using the wrong width
The result is only as right as the width you type. If your test window is 1366 px wide and you convert at 1440, every value is off by about five percent. Read the real width from the developer tools.
Confusing vw with percent
A width of 50% refers to the parent's width, while 50vw refers to the window. Inside a narrow container the two are very different. The converter gives the vw answer; if your element is inside a container, the parent may be narrower than the window.
Forgetting that text in vw cannot be zoomed
Text sized only in vw does not respond when the reader zooms the page, because the window and the text scale together. Accessibility guidelines ask that text can be resized. Add a rem term, as in clamp(), so that the text responds to zoom as well.
Questions people ask before converting
How many pixels is 1 vw?
One hundredth of the window width: 14.4 px at 1440, 10 px at 1000, 3.6 px at 360.
How many pixels is 50 vw?
Half the window: 720 px at 1440 wide, 500 px at 1000 wide.
Why is my page wider than the screen?
A box of 100vw on a page that scrolls is wider than the visible area because the scrollbar is counted. Use 100% inside a container instead.
Is vw the same as percent?
No. Percent refers to the parent, vw to the window.
Is my number uploaded?
No. The arithmetic runs in your browser and nothing is sent anywhere.
How do I go back?
With px to vw, which divides by the width instead of multiplying.
Common values at common widths
A mental table
It helps to know a few anchors so that you can estimate before you use the converter. At a width of 1000 px, 1 vw is 10 px, which makes the arithmetic trivial: 2.5 vw is 25 px, 8 vw is 80 px. At 1440 px, 1 vw is 14.4 px. At 375 px, 1 vw is 3.75 px, so a title of 8 vw is 30 px. When you convert vw to px for a quick check, start from one of these anchors and scale.
Three widths, one stylesheet
Take a card with a width of 80vw, a gap of 4vw and a title of 6vw. On a phone of 375 px they come to 300 px, 15 px and 22.5 px. On a tablet of 768 px, 614 px, 30.7 px and 46 px. On a desktop of 1440 px, 1152 px, 57.6 px and 86.4 px. Seeing all three side by side tells you at once that the card is far too wide on the desktop and the title far too large, and that you probably want a maximum width and a clamp.
Beyond the viewport
Container units
Newer CSS offers units relative to a container instead of the window, such as cqw, which is one hundredth of the container's width. They solve the problem that a component placed in a narrow sidebar behaves as if it had the whole window. If you use them, the arithmetic is the same as for vw, with the container's width as the base, and you can use this converter by typing that width.
Small, large and dynamic viewports
On phones, the visible area changes as the address bar slides away. For heights, the newer units svh, lvh and dvh describe the small, large and dynamic viewport. For widths the situation is simpler, since the address bar does not affect it, and vw is stable. That is one more reason why vw is a safer unit than vh for fluid design on mobile.
Percent, vw and the grid
Percent widths follow the parent, vw follows the window, and CSS grid and flexbox follow the available space. Often the best fluid layouts use grid and percentages for structure and vw only for type and spacing, because those are the things that benefit from following the screen directly. When you convert vw to px to check a layout, ask whether a grid track would have said the same thing more robustly.
Explaining vw to people who do not write CSS
Use the window as the ruler
Clients and colleagues usually understand the idea once you say that a vw is one percent of the width of the screen. A title of 5 vw is five percent of the screen wide. Then show them two numbers: what it comes to on their own phone and on the large monitor in the meeting room. When you convert vw to px for both widths and say the results aloud, the idea of a size that moves with the screen becomes concrete.
Say why the design is not fixed
Non-technical stakeholders sometimes ask why the page does not simply have one size for the title. The answer is that screens differ by a factor of seven or eight between the smallest phone and the largest monitor, and a fixed size that suits one is wrong for the other. Fluid units are the answer, and the pixel figures from this page show how much the screen changes the same value.
Where these units come from
The CSS pixel
When displays stopped having a predictable density, a page measured in real pixels became a page that shrank as screens got sharper. So the CSS pixel was redefined as a reference length: about 1/96 of an inch seen at a comfortable reading distance. It is the unit that this page gives its answers in.
The viewport units
The vw arrived with responsive design: one hundredth of the viewport's width, whatever that turns out to be. It sits next to the rem, relative to the root font size, and the em, relative to the element. To see how the same pixel value looks in those units, convert rem to px and compare.
Habits that keep fluid code understandable
Comment the pixel values
A line such as font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px at 360, 96px at 1440 */ costs a few words and saves the next reader several conversions.
Keep the design width in one place
If your project has a custom property for the width the design was drawn at, every vw value can be traced to it. When you convert vw to px for a review, you know which width to use.
Use vw sparingly
A short list of vw values is easy to reason about. A stylesheet where everything is in vw is not. Keep it for display type, large gaps and artwork.
Test with real devices when it matters
Browser tools simulate widths well, but a real phone shows the true behaviour of address bars, rotation and zoom. A five-minute check on a device catches what a simulation misses.
Related converters
The same family of tools covers the neighbouring conversions. To go back to vw, use px to vw. For sizes relative to the root, there are px to rem and rem to px, and for sizes relative to the element, px to em and em to px. For the colours of the same stylesheet, HEX to RGB and RGB to HEX handle the notations.
A worked example
Say a tester reports that the hero title is hard to read on a small phone. The stylesheet says font-size: 5.2vw with no limits. You convert vw to px at 360 and read 18.7 px, at 768 read 39.9 px, at 1440 read 74.9 px. At the narrow end the title is a little larger than body text and no longer reads as a title. You suggest clamp(2rem, 1rem + 4vw, 5rem), which gives 32 px at the narrowest, about 51 px at 768 and 5rem, 80 px, at the widest. The tester confirms that it now reads well, and the title still scales.
A short checklist
Before converting
Choose the widths you care about, from the developer tools or from your list of target devices.
While converting
Type the vw value and each width in turn, and note the pixels shown beside the base.
After converting
Look at the extremes. If a size is too small or too large at either end, add limits with clamp().
Common mistakes
Assuming a single answer
A vw value has a different pixel size at every width. Give the width with every figure.
Forgetting the scrollbar
100vw includes it, so a full-width box can overflow.
Sizing body text in vw alone
It cannot be zoomed. Add a rem term and limits.
Your numbers stay on your device
The calculation happens locally. Your values are used by your own browser and nothing is sent anywhere. There is nothing to delete afterwards and no account to create. That is the plain way to convert vw to px.
Summary
To convert vw to px here, type the size in vw and the width of the window, and read the result in pixels at once, using the formula px = vw × width ÷ 100. The width starts at 1440 px, a width designs are often drawn at, but it is a habit and not a standard, so type your own. The conversion keeps the share of the screen: one vw is one hundredth of the viewport width, so a size in vw grows and shrinks with the window. Unlike rem, vw has no default, since the viewport is however wide the reader's window is. For text, combine vw with rem inside clamp(), so that it stays readable and zoomable. Nothing is uploaded.