CSS Unit Converter

CSS Unit Converter
Convert
converts to all units
Base Settings
Root font size px
Parent font size px
Viewport width px
Viewport height px
Container width px
Quick Presets
History
No conversions yet.
All unit conversions for 16px
font-size: 1rem;
Copied!

How to Use the CSS Unit Converter

Follow these simple steps to convert CSS units:

  1. Enter your value Type the number you want to convert (e.g., 16px).
  2. Select the input unit Choose from px, em, rem, %, vw, vh.
  3. Select the output unit Pick the unit you want to convert to.
  4. View instant results The converted value appears automatically.
  5. Copy & use Click the copy button to insert the value into your CSS.

Pro Tips:

  • Use live previews for testing responsive layouts.
  • Adjust the root font size for rem conversions.
  • Ensure mobile compatibility by testing viewport unit conversions.

Supported CSS Units & Definitions

Absolute Units

  • px (pixels): The most common unit, fixed size.
  • pt (points): Typically used for print design.
  • in, cm, mm (inches, centimeters, millimeters): Physical measurements.
  • pc (picas): Often used in typography (1pc = 12pt).

Relative Units

  • em: Relative to the parent element’s font size.
  • rem: Relative to the root font size.
  • %: Relative to the parent element’s size.

Viewport Units

  • vw (viewport width): 1vw = 1% of viewport width.
  • vh (viewport height): 1vh = 1% of viewport height.
  • vmin / vmax: Based on the smaller/larger dimension of the viewport.

Use relative and viewport units for scalable, responsive design.

How to use the CSS Unit Converter

Conversion Formulas with Worked Examples

Conversion

Formula

Example

px → rem

rem = px ÷ root font-size

16px ÷ 16 = 1rem

rem → px

px = rem × root font-size

1.5rem × 16 = 24px

em → rem

em = px ÷ parent font-size

24px ÷ 16 = 1.5em

% → px

px = (% × parent px) ÷ 100

50% × 32px ÷ 100 = 16px

vw → px

px = vw × viewport width ÷ 100

50vw on 1200px viewport = 600px

vh → px

px = vh × viewport height ÷ 100

50vh on 800px viewport = 400px

Tip: Always verify parent or root font size when converting relative units.

Practical Use Cases for Designers & Developers

  • Responsive Typography: Scale font sizes consistently across devices.
  • Layout Scaling: Adjust padding, margins, and container widths dynamically.
  • Design Handoff: Convert design mockup values from Figma or Sketch to CSS.
  • Accessibility: Ensure text and spacing remain readable across resolutions.
  • Mobile-first Development: Use viewport units to create flexible layouts.

Related Tools

Frequently Asked Questions

What is the difference between px, em, rem, and %?

px is fixed, em depends on parent font size, rem depends on root font, and % depends on parent element size.

Use vw/vh for responsive layouts that scale with screen size, like hero sections or images.

Rem is calculated based on root font size; changing it scales all rem-based values proportionally.

Yes, standard CSS units are supported by all modern browsers, ensuring consistent rendering.

Absolutely, the CSS Unit Converter is fully free and requires no signup.