CSS Unit Converter

Unit options

Conversion

Value

From

To

Context

Base font size, px

Parent size, px

Viewport width, px

Viewport height, px

rem uses the base font size. em and % use the parent size. vw and vh use the viewport width and height.

Status

Idle

Live preview

CSS unit preview

16px = 1rem

Input value

Converted value

CSS output

About CSS Unit Converter

CSS Unit Converter helps convert common CSS units like px, rem, em, %, vw, and vh. It is useful when adapting typography, spacing, breakpoints, and responsive layouts.

You can change the base font size, parent size, viewport width, and viewport height to match your project context instead of relying on fixed assumptions.

How to use it

Enter the value you want to convert.
Choose the source and target CSS units.
Adjust base font size, parent size, or viewport values when needed.
Copy the converted value or CSS rule.

Tips

Use 16px as the common default base size for rem conversions.
Use parent size when converting em or percent values.
Use viewport width for vw and viewport height for vh conversions.
Check the preview to understand the visual scale of the converted value.

Related tools

You may also find these tools useful.

CSS Media Query Generator

Build responsive CSS media queries for width breakpoints, orientation, dark mode, reduced motion, and hover support.

CSS Container Query Generator

Generate CSS container queries with container type, container name, breakpoint rules, and responsive declarations.

CSS Grid Generator

Build CSS Grid layouts with columns, rows, gaps, alignment, live preview, and copy-ready CSS.

Color Converter

Convert HEX, RGB, RGBA, and HSL colors instantly in your browser.

CSS unit converter FAQ

How do px and rem differ?

px is an absolute CSS length. rem is relative to the root font size, commonly 16px by default.

When should I use em?

em is relative to the current or parent font size, so it is useful for component-level scaling.

How is percent converted?

Percent conversion depends on a reference size. This tool uses the parent size field as that reference.

How are vw and vh calculated?

1vw is 1% of the viewport width, and 1vh is 1% of the viewport height.