Convert between px, rem, em, %, vw, and vh for consistent, responsive CSS.
The CSS Unit Converter translates measurements between px, rem, em, percent, vw, and vh. Set your base font size and viewport, then convert any value to keep spacing and typography consistent and responsive across a project. It takes the mental math out of moving from a pixel-based mockup to scalable, accessible units.
Pixels (px) are absolute — a fixed size regardless of context. Relative units scale with something else: rem is relative to the root font size, em to the current element's font size, and vw/vh to the viewport's width and height. Relative units make layouts respond to user settings and screen size, which is why modern CSS favours them for typography and spacing.
Building an interface entirely in pixels locks it to one scale. If a user increases their browser's default font size for readability, pixel-based text ignores them, which is an accessibility problem. Relative units respect that choice: size your type and spacing in rem, and the whole interface scales from a single root value. Viewport units go further, letting elements grow and shrink with the screen so a layout feels fluid on everything from a phone to a widescreen monitor.
Convert a pixel value to rem with a standard base:
24px16px1.5remBecause rem is relative to the 16px root, 24 ÷ 16 = 1.5rem. If a user increases their browser's default font size, everything expressed in rem scales with it — something a fixed 24px value would never do.
Both are relative, but they anchor to different things. rem is always relative to the root font size, which makes it predictable and ideal for a global type and spacing scale. em is relative to the current element's font size, so it compounds when nested — useful for padding that should grow with a component's own text, but a common source of surprises when elements nest deeply. A good default is to reach for rem for consistency and use em deliberately when you want a value to track its element's local font size.
rem is relative to the root font size, so the tool divides the pixel value by your configured base (commonly 16px).
They are percentages of the viewport width and height, useful for fluid, responsive sizing.
em is relative to the current element's font size, while rem is always relative to the root, making rem more predictable.
rem scales with user font-size settings, improving accessibility and consistency.
16px is the browser default and a common base, but you can set any value to match your project.
Yes. All conversions run locally in your browser.
Pair it with the CSS Color Converter and CSS Border Radius Generator for a complete styling toolkit.
How to Use CSS Unit Converter
Type the measurement and choose its unit.
Adjust the base font size and viewport if needed.
Copy the converted unit value into your CSS.
Convert between px, rem, em, %, vw, and vh for consistent, responsive CSS.
Tool Use:
0Added:
Sep 11, 2026Type:
Free ToolPrivacy:
Client SideConvert between Celsius, Fahrenheit, Kelvin, and Rankine instantly. Free online temperature converter with live four-way conversion and precision controls.
Convert numbers to Roman numerals and Roman numerals back to numbers. Standard form, vinculum notation for large numbers, copy-ready output. Free.
Convert colors between HEX, RGB, RGBA, and HSL instantly.
Create CSS gradient text with a live preview and copy-ready code.
Round corners visually and copy the exact border-radius CSS — with live preview.