Convert five common CSS relative units, rem, em, vw, percent and ms, to pixels (or seconds) instantly. Set the base value each unit depends on (root font size, parent font size, viewport width) and copy the result in one click. Everything runs entirely in your browser.
CSS has several relative units whose actual size depends on the screen, the parent element, or the root element. rem and em are relative to a font size, vw to the viewport width, percent to the parent's width, and ms to how long an animation or transition runs. All five reduce to the same shape of math, base value times a multiplier equals an absolute value (px or seconds), but what counts as the base changes every time.
In practice, designs arrive in px while implementation uses relative units, so you move between these five units and px many times a day. Instead of opening a different page for each unit, this page keeps them one tab-click away on the same screen.
rem (root em) is relative to the HTML root element's font size. The formula is px = rem x root font size. At the default 16px, 1rem = 16px, but a project that changes the root (e.g. html { font-size: 62.5% }) shifts that, so set the root font size input to match your actual project.
When a visitor increases their browser's default text size, values sized in rem grow with it, which helps accessibility. rem is the usual choice for font sizes and spacing that should scale with the whole page.
em uses the same formula as rem, px = em x parent font size, but the base is the font size the element inherits from its parent, not the root. Using em inside an element that already sets its own font size in em multiplies the ratios together, so when you check a value nested several levels deep, enter the real parent size for an accurate result.
em suits a single element that should scale in proportion to its own font size, like button padding; rem suits values that need to scale predictably against the whole page.
vw (viewport width) uses px = vw x viewport width / 100: 1vw is 1% of the browser window's full width. It shows up often in responsive hero titles and elements meant to scale directly with screen width.
Set the viewport width input to the screen size you actually want to check, mobile at 390px, desktop at 1440px, and so on, to see how many pixels that value becomes at that breakpoint.
Percent uses px = % x parent width / 100, where the parent width is the browser's actual computed value, not whatever the CSS declares. If the parent sits in a fluid layout (flex or grid), remember that this base value itself changes with the screen size.
It is useful for checking, ahead of time, how many pixels a percentage-based width becomes inside a fixed-width container at a specific screen size.
ms and s are a plain ratio (1s = 1000ms), so no base value is needed. CSS's transition-duration and animation-duration both accept either unit, so this is for moving a millisecond value from a design spec into seconds in code, or checking it the other way.
This only converts the unit; how fast an animation actually feels still depends on its easing function and what it's animating, which is a separate consideration.
Design tools usually hand you px, but font sizes and spacing are better implemented in rem for accessibility. With dozens of values in one screen, it's faster to check them with the converter than to divide by 16 by hand each time.
If the parent element's font-size has already been scaled up or down, the em value alone doesn't tell you the real size. Enter the parent's computed font size to get an accurate px value.
Change the viewport width to 390px (mobile) and the same 5vw becomes 19.5px. This is for checking, across several screen widths, that a font size scaled with vw stays within its intended min and max.
When a grid column or sidebar width is designed as a percentage, this checks how many pixels it becomes at a specific breakpoint, so you can tell whether it will line up with other fixed-width elements.
Design specs are often written in milliseconds while a codebase's convention is seconds, or the reverse. transition-duration behaves the same either way, so use whichever matches your team's convention.
What it is, who it's for, how it works and why you'd use it.
CSS Unit Converter instantly converts five common CSS relative units, rem, em, vw, percent, and ms, into pixels (or seconds) and back.
It is for front-end developers and UI designers who work with responsive layouts and animations and constantly move between relative and absolute units.
Pick a unit pair from the tabs above, enter a value and its base (root font size, parent font size, viewport width, and so on), and the result appears instantly in your browser. Use Swap to flip direction.
Instead of hunting down a separate converter for each unit, you get all five CSS unit conversions on one page, cutting down the repeated math in responsive work.