the IT Hustle
ToolsPricingBlogAbout

CSS Unit Converter

Convert between any CSS units instantly. Supports px, rem, em, %, vw, vh, pt, cm, mm, and in. Set your base font size for accurate rem/em calculations. Copy the CSS value with one click.

→

Result

1rem

16px equivalent

Common Conversions (base 16px)

pxrempt
1px0.0625rem0.75pt
8px0.5rem6pt
10px0.625rem7.5pt
12px0.75rem9pt
14px0.875rem10.5pt
16px1rem12pt
18px1.125rem13.5pt
20px1.25rem15pt
24px1.5rem18pt
32px2rem24pt
48px3rem36pt
64px4rem48pt

How to Convert CSS Units

Convert between px, rem, em, %, vw, vh, and other CSS units using The IT Hustle's free CSS Unit Converter.

  1. 1
    Enter a valueType the numeric value you want to convert into the input field.
  2. 2
    Select unitsChoose the 'from' unit and 'to' unit from the dropdown menus. Supported units: px, rem, em, %, vw, vh, pt, cm, mm, in.
  3. 3
    Set base valuesFor rem/em conversions, set the base font size (default 16px). For vw/vh conversions, set the viewport dimensions.
  4. 4
    Copy the CSS valueClick Copy to copy the converted value with its unit suffix (e.g., '1.5rem'), ready to paste into your stylesheet.

Frequently Asked Questions

Use rem for font sizes and spacing to respect user accessibility settings. Use px for borders, shadows, and very small values where sub-pixel rendering doesn't matter. The key is rem scales with the user's browser font size setting.

Setting html { font-size: 62.5% } makes 1rem equal to 10px (instead of the default 16px), making mental math easier: 1.6rem = 16px, 2rem = 20px. However, this is controversial as it can affect third-party components.

rem is relative to the root element's font size (usually 16px). em is relative to the parent element's font size, which can compound and become hard to predict in nested elements. rem is generally preferred for consistency.

Related Tools

CSS Gradient GeneratorColor ConverterColor Palette Generator