FFreeToolsVerse
Home/Tools/Converters/CSS Unit Converter

CSS Unit Converter

Converters

Convert between CSS units like px, em, rem, vw, vh, and percentages.

⚡ Instant🔒 Private, in your browser🆓 Free, no sign-up👥 For everyone
Your data never leaves your browser. We do not store inputs.

What CSS Unit Converter does

The CSS Unit Converter converts between px, em, rem, vw, vh, and percentage values based on a base font size or viewport dimension you set. It's free, runs entirely in your browser, and helps you translate fixed pixel values from a design mockup into the relative units needed for responsive, accessible web layouts.

FV
Reviewed by the FreeToolsVerse team · Last updated · How we check our tools

How to use CSS Unit Converter

  1. Enter the value and select its source unit (px, em, rem, vw, vh, or %)
  2. Set your base font size or viewport dimensions if converting relative units
  3. View the converted value across the other units instantly
  4. Copy the CSS value you need

Who should use it

Made for everyone. Typical uses:

  • Converting a fixed px value from a Figma or Sketch mockup into rem for scalable, accessible typography
  • Working out what vw value matches a fixed pixel width at a specific screen size
  • Migrating a legacy stylesheet's px-based spacing into a rem-based design system

Frequently asked questions

What's the difference between em and rem?
em is relative to the font size of its parent element, so it can compound in nested elements; rem is always relative to the root (html) element's font size, making it more predictable.
What base font size does it assume?
It defaults to the common 16px browser default, but you can set a different base font size to match your project's actual root size.
Is it free to use?
Yes, completely free.
Is my data uploaded anywhere?
No, all conversions happen locally in your browser.
Does it support viewport units like vw and vh?
Yes, based on the viewport width or height you enter, since vw/vh are relative to the browser window size rather than a fixed base.

Learning resources

Explore more in Converters, read the guides and articles, or see how we test our tools.

Share This Tool

TwitterFacebookLinkedIn

Related tools

PX to EM Converter

Convert pixel values to EM units for responsive web design.

Best for converting a design spec's pixel measurements into em units for a responsive CSS stylesheet

REM to PX Converter

Convert rem to px and px to rem for responsive typography.

Best for converting a Figma or Sketch spec given in pixels into rem for a responsive stylesheet

VW to PX Converter

Convert viewport width units (vw) to pixel values for responsive design.

Best for checking how a hero heading sized in vw will look on a common desktop resolution

Color Contrast Checker

Check color contrast ratios for WCAG compliance.

Best for checking that body text color meets WCAG AA contrast requirements before shipping a website

Box Shadow Generator

Generate CSS box shadow effects with a visual editor.

Best for adding a subtle drop shadow to a card component to lift it off the page

More Converters tools

Binary to Decimal ConverterCM to Inches ConverterCelsius to Fahrenheit ConverterCMYK to RGB ConverterColor ConverterCurrency ConverterFahrenheit to Celsius ConverterFeet to Meters Converter

Categories

Calculators43Converters43Developer Tools33Generators46Minifiers13SEO Tools20Text Tools23Validators15Network Tools6PDF Tools19Image Tools16Social Media Tools3Video Tools10AI Tools6