VW to PX Converter

About CSS Unit Converter

Every conversion between CSS lengths rests on one number: the reference the unit is relative to. rem is a multiple of the root font size, em of the element's own, % of whatever the containing block is, and vw and vh of the viewport. None of those can be known from the value alone, which is why this asks for them rather than assuming sixteen — and why the answer moves when a reader has set their browser's default text size larger, which is the entire reason rem exists.

The genuinely fixed conversions are the print units. CSS defines an inch as exactly 96px whatever the display actually is, so 1in = 96px, 1pt = 1.333…px and 1cm = 37.795…px are not approximations — they are the specification. It is the physical size on a real screen that is approximate, which is the opposite of what most people assume.

The preview is the point of the page as much as the numbers are. A figure in pixels means very little until it is beside something, so the same length is drawn three ways: as a rule, as a line of text set at that size, and as a square. Change the root font size and watch the rem figure and the drawing move together — that is the fastest way to understand what rem actually is.

Where it helps

• Converts between all fourteen CSS length units at once rather than one pair at a time.
• Asks for every reference a relative unit depends on, and lists what it assumed alongside the answer.
• Draws the length as a rule, as text and as a square, so the number can be judged rather than just read.
• Explains what each unit is relative to, which is the part that decides whether it is the right unit to use.
• Warns about the traps: 100vh on mobile, em compounding when elements nest, and sub-pixel lengths that vanish when drawn.
• Accepts a length with its unit typed in, so a declaration can be pasted straight from a stylesheet.

Limits

• Lengths only. Angles, times, resolutions and the frequency units are not converted here.
• The preview is drawn in this page rather than in your layout, so it shows the length and not how your page will use it.
• Container queries, ch, ex, lh and the dynamic viewport units depend on a font or a live layout and are not offered.
• A percentage is a proportion of a containing block along one axis; which axis is yours to know, and the tool assumes the one you gave it.

Frequently asked questions

Should I use px or rem?

rem for anything a reader might want larger — type, spacing, and the widths that follow from them — because it scales with their browser setting and px does not. px is right for the things that should not scale: hairline borders, and the odd one-pixel alignment nudge.

Why is 1in not an inch on my screen?

Because CSS defines an inch as exactly 96px rather than as a physical measurement. On a display of any other density the result is not an inch. The print units are reliable for print, where the renderer knows the paper, and are a fixed ratio to px everywhere else.

What is wrong with 100vh?

On mobile browsers it means the viewport with the address bar hidden, so a full-height element overflows until the bar actually hides. dvh, svh and lvh were added to express the three different heights, and one of those is usually what you meant.

Why does em give a different answer from rem?

Because em is relative to the element's own font size and rem to the root. They agree only when those two are the same. em also compounds — an em inside an element sized in em multiplies — which is useful for padding that should track its own text and a trap for anything else.

Related tools

• CSS Formatter — Format stylesheets with consistent indentation
• SCSS/SASS Formatter — Format SCSS syntax and nested rules
• Aspect Ratio — Ratios and proportional resize targets
• Contrast Checker — WCAG contrast ratio for text and UI colours
• HTML Formatter — Indent and tidy HTML markup
• JavaScript Formatter — Re-indent JavaScript and TypeScript source

More Web Development tools

• HTML Formatter — Indent and tidy HTML markup
• CSS Formatter — Format stylesheets with consistent indentation
• JavaScript Formatter — Re-indent JavaScript and TypeScript source
• SCSS/SASS Formatter — Format SCSS syntax and nested rules
• TypeScript Formatter — Format TypeScript source code
• SQL Formatter — Format SQL statements with dialect selection
• SQL Minifier — Collapse formatted SQL into compact text
• CSS Unit Converter — px, rem, em, percentages and viewport units, with a preview
• Query String Parser and Builder — Convert query strings into editable key-value data
• CSP Generator — Build a Content-Security-Policy, or check one, and write it for your server or framework
• CORS Generator — Write CORS configuration for nginx, Express, Go, Django, ASP.NET, Spring and more, and test an origin against it
• cURL Builder — Build an HTTP request and get it as curl, JavaScript, TypeScript, Go, Python, PHP, C#, Java and more
• Minifier — Shrink CSS, HTML or JavaScript
• Flexbox Playground — Try every flex property and read the CSS back
• CSS Grid Playground — Build a grid template and see the tracks it makes
• Responsive Viewport Tester — Render your markup at phone, tablet and desktop widths
• SVG Path Viewer — Draw path data and read back what it contains
• SVG to CSS Converter — Turn an SVG into a data URI for CSS or an img tag
• OAuth 2.0 / OIDC Helper — PKCE verifiers and challenges, state, nonce, and checking what came back
• Regex Tester — Test patterns, inspect groups and preview replacements
• User-Agent Parser — Identify the browser, engine, operating system and device behind a User-Agent string
• HTTP Status Codes — Look up what a status code means, when to send it, and whether it is cached or safe to retry
• HTML to JSX — Convert HTML and SVG markup into JSX for React, with styles, attributes and whitespace handled
• Semver Checker — Test versions against npm ranges, sort them by precedence, and see what each bump produces
• Cookie Parser and Builder — Read Set-Cookie and Cookie headers, check them against browser rules, and write one for your framework