CSS Unit Converter

The CSS Unit Converter translates a length value from one CSS unit into another so you can size type, spacing, and layout consistently. It handles the units you reach for most often in stylesheets: absolute pixels (px), font-relative units (rem and em), percentages (%), and the viewport units vw and vh. Because several of these are relative, conversions depend on a reference size, which the tool lets you set.

How to use it

1. Enter the value you want to convert, for example 24.
2. Choose the unit you are converting from and the unit you are converting to.
3. Set the root font size (the browser default is 16px) so rem and em calculate correctly.
4. If you are working with em, %, or viewport units, supply the relevant context: the parent element size for em and %, or the viewport width and height for vw and vh.
5. Read the converted result and copy it straight into your CSS.

Understanding CSS units

Units fall into two groups. Absolute units like px are fixed: 1px is always one device-independent pixel regardless of context. Relative units scale against something else. A rem is relative to the root (html) font size, so 1rem equals 16px by default. An em is relative to the font size of the current or parent element, which means ems can compound when nested. A percentage is relative to the corresponding property on the parent, often its width or font size. vw and vh are each 1% of the viewport's width and height, making them useful for responsive sizing.

The conversion maths is straightforward once the reference is known. To turn px into rem you divide by the root font size: 24px ÷ 16 = 1.5rem. To turn rem back into px you multiply by it. For vw, the pixel value is the viewport width multiplied by the percentage; on a 1280px-wide screen, 10vw equals 128px.

FAQ

When should I use rem instead of px?

Use rem for font sizes and spacing you want to scale with user preferences. When someone increases their browser's default font size for readability, rem-based values grow with it while px values stay fixed, so rem is the more accessible choice for text.

What is the difference between em and rem?

Both are font-relative, but rem always references the root font size, giving predictable results. Em references the nearest element's font size, so values can multiply through nested elements. Use rem when you want consistency and em when you want a value to track a local font size.

When are vw and vh the right choice?

Reach for vw and vh when a size should respond directly to the viewport, such as full-height hero sections or fluid typography. They ignore parent and root sizes, so they react to screen dimensions rather than document structure.

Does the converted value depend on settings I enter?

Yes. Relative units have no fixed pixel value on their own, so results change with the root font size, parent size, or viewport dimensions you provide. Set these accurately to match your real layout.