How to Convert CSS Units Online (px, rem, em, vw, vh)

CSS units can be confusing — should you use px, rem, em, or viewport units? Converting between them requires knowing the base font size and viewport dimensions. This guide shows you how to convert CSS units online using fixie.tools — a free calculator that handles all common CSS units for responsive design.

Step 1: Open the CSS Units Converter

Navigate to fixie.tools/css-units. No signup required.

Step 2: Enter Your Value and Source Unit

Type the numeric value and select the source unit (px, rem, em, vw, vh, vmin, vmax, %, pt, cm, mm, in). The tool supports all standard CSS length units.

Step 3: Set Your Base Values

Configure the base font size (default 16px) and viewport dimensions for accurate conversions. These values affect rem, em, vw, and vh calculations. Adjust them to match your project settings.

Step 4: View All Conversions

The tool instantly displays your value converted to all other CSS units simultaneously. Copy any value you need directly into your CSS code.

Try It Now — Free, No Signup →

Frequently Asked Questions

Is the CSS units converter free?

Yes, completely free with no signup required.

What is the default base font size?

The default browser base font size is 16px, which means 1rem = 16px. You can change this in the tool to match your project's root font size.

When should I use rem vs px?

Use rem for text sizes and spacing to respect user font size preferences for accessibility. Use px for borders, shadows, and elements that should remain a fixed size regardless of user settings.

How do viewport units work?

1vw equals 1% of the viewport width, and 1vh equals 1% of the viewport height. They're useful for responsive layouts that scale with the browser window.

Related Tools

CSS Typography Playground

Preview and test CSS typography settings

CSS Flexbox Playground

Build flexbox layouts visually

CSS Grid Generator

Create CSS grid layouts