CSS Unit Converter — px to rem, rem to px, vw, vh, em, % in One Table
Set your base font size and viewport — get all CSS unit equivalents instantly
Switching between CSS units during responsive design — converting a Figma pixel value to rem, figuring out what 2.5rem is in pixels on a 16px root, or checking what vw value matches a given pixel width — requires mental math that slows down implementation. This CSS unit converter shows all equivalents in a single table. Enter a value and a source unit, set your base font size (default 16px) and viewport dimensions (default 1440x900), and instantly see the equivalent in px, rem, em, vw, vh, and percentage of width and height. All six conversions update simultaneously with no button to click.
How to Convert CSS Units
Enter a value, pick a unit, set your context, and get all equivalents instantly.
Enter a value and unit
Type a numeric value into the input field and select the source unit from the dropdown: px, rem, em, vw, vh, or percent. The conversion table below updates immediately with the equivalent value in all other units.
Configure base font size and viewport
The conversion of rem, em, vw, and vh depends on context. Set your base font size (the root font-size in your CSS, commonly 16px or 10px) and your viewport width and height (the screen size you are designing for, such as 1440x900 for desktop or 375x812 for mobile). All conversions recalculate instantly when you adjust these settings.
Read the full conversion table
The output table shows your value in px, rem, em, vw, vh, percent width, and percent height simultaneously. This makes it easy to compare options — for example, to see whether 1.5rem or 24px better describes the same value in your design system, or to find the vw value that matches a specific pixel width on your target viewport.
Features
Converts between px, rem, em, vw, vh, and percent width/height
All six conversions shown simultaneously in one table
Configurable base font size (default 16px)
Configurable viewport width and height (default 1440x900)
Instant conversion with no button to click
Input accepts decimal values
Useful for translating Figma designs to responsive CSS
Runs in your browser — no account needed
Related Tools
Frequently Asked Questions
What is the difference between em and rem?
Both em and rem are relative units based on font size. rem (root em) is always relative to the root element font size (typically 16px unless overridden). em is relative to the font size of the current element, which can change if the element is nested inside other elements with different font sizes. rem is generally more predictable and easier to use for layout.
How do I convert px to rem?
Divide the pixel value by your root font size. With the default root font size of 16px: 24px / 16 = 1.5rem. If you set your root font size to 10px (a common practice for easier math), then 24px = 2.4rem. Use this converter to calculate the rem equivalent for any pixel value and root font size combination.
When should I use vw vs px for font sizes?
Viewport width (vw) units make font sizes scale with the browser window, which is useful for fluid typography. However, pure vw font sizes become too small on mobile and too large on wide screens. The best practice is to use CSS clamp() to set a minimum, preferred (in vw), and maximum font size, or use a media-query breakpoint approach.
What viewport size should I use for desktop CSS conversions?
Common desktop design targets include 1440px wide (a popular Figma artboard size), 1280px, and 1920px for large monitors. Set the viewport width in this converter to match the design file you are implementing from to get accurate vw and percentage conversions.
What is the difference between percent width and percent height in CSS?
Percent width in CSS is relative to the parent element width. Percent height is relative to the parent element height — but only if the parent has an explicitly defined height. Without an explicit height on the parent, a child with a percentage height will collapse to zero. This is a common source of confusion in CSS layouts.