CSS Unit Converter

From

Base (px)VWVH

Auto-detect Input

Pixels (px) Output

16px
32px
64px

:root {
  --size-1: 16px;
  --size-2: 32px;
  --size-3: 85.3333px;
  margin: 16px 24px;
  font-size: 16px;
  width: 960px;
}

Auto-detectInputPixels (px)Output11Items

Unit conversions

Convert CSS length values between px, rem, em, vw, vh, vmin, vmax, pt, and %. You can convert single values line by line or paste full CSS declarations. The tool automatically replaces matching values in the chosen source unit while preserving the rest of your formatting.

Base typography context

Relative units like rem, em, and % require a reference size. The Base Font setting determines this baseline (typically 16px). Adjust it to match your project’s root typography when converting to or from these units.

Viewport context

Viewport units depend on the browser window size. Configure the Viewport Width and Viewport Height to simulate a specific screen size. This ensures accurate pixel translations when converting responsive vw and vh values.

Frequently Asked Questions

What does this CSS Unit Converter do?

This tool converts CSS length values between px, rem, em, vw, vh, vmin, vmax, pt, and %. You can convert plain numbers line by line or paste full CSS snippets and replace matching units automatically.

Can I convert full CSS, not just single values?

Yes. You can paste CSS declarations like margin, padding, font-size, width, height, or min-height, and the tool will find values in the selected source unit and convert them to the target unit.

Why do rem, em, and percentage conversions need a base font size?

These units depend on a reference size. In this tool, rem, em, and % conversions use the Base Font setting as the conversion context, so results match the assumptions you choose.

Why do vw, vh, vmin, and vmax need viewport dimensions?

Viewport-relative units are based on the browser window size. The tool uses the Viewport Width and Viewport Height settings to calculate those conversions accurately for the screen size you want to simulate.

Can I swap the conversion direction?

Yes. Use the swap button to instantly reverse the selected units, such as px to rem or rem to px, without re-entering your content.

Does the tool keep my CSS formatting?

It keeps each line and replaces matching values in the selected source unit. Plain numeric lines are treated as values in the source unit, while CSS lines are converted inline so you can copy the updated output directly.

Looking for a faster, single-purpose workflow?