Skip to content
Marvin's Toolbox.

CSS Unit Converter

Convert between px, rem, em, percent, pt and viewport units with a configurable root font size. Type into any field and the others update as you go, set the parent font size for em math, and read a conversion table for common sizes.

Runs entirely in your browser. Nothing you put in here gets uploaded.

source

Conversion context

The font size on the html element. Drives rem. Browsers default to 16px.

The font size of the element's parent. Drives em.

What 100% refers to. Use the parent font size for font sizes, or a container width for widths.

Drives vw. 1vw is 1% of this width.

Drives vh. 1vh is 1% of this height.

Digits after the decimal point, 0 to 6. Trailing zeros are trimmed.

Common sizes

Common px values at a 16px root font size. Click a value to copy it.

pxremempt

About the CSS Unit Converter Tool

This tool converts CSS sizes between px, rem, em, percent, pt and the viewport units vw and vh. Type into any field and the other six update as you type, so you can go from px to rem just as easily as from vw to pt.

Relative units only mean something in context, so you set that context yourself: the root font size for rem, the parent font size for em, the size that 100% refers to, and the viewport dimensions for vw and vh. The defaults match a normal browser setup with 16px fonts and a 1920 by 1080 viewport.

What you can do

  • Convert px to rem and rem to px at any root font size.
  • Convert px to em using the parent font size instead of the root.
  • Turn percentages into px by setting what 100% refers to.
  • Convert pt to px and back using the CSS ratio of 96px per 72pt.
  • Convert vw and vh to px for any viewport size, like 1920 by 1080 or a phone screen.
  • Read a px to rem chart of common sizes from 1px to 96px, ready to copy.
  • Copy any value with its unit attached, like 1.5rem or 150%.

How to use the CSS Unit Converter

  1. 1Check the conversion context. Adjust the root font size if your CSS changes it, for example the 62.5% trick that makes 1rem equal 10px.
  2. 2Type a value into the field of the unit you have. The other fields fill in as you type.
  3. 3Pasting a value with its unit works too, so 1.5rem in the rem field is read as 1.5.
  4. 4Copy the converted value you need. The copy button includes the unit, ready for your stylesheet.
  5. 5Use the common sizes table when you are converting a whole scale, and click any value to copy it.

rem, em and percent are not the same

A rem is always measured against the font size of the html element, no matter how deeply an element is nested. An em is measured against the element's parent font size, so nested em values compound. Percent depends on the property: for font-size it refers to the parent font size, while for width it refers to the containing block. That is why the tool has three separate context settings, one for rem, one for em and one for percent.

How pt and viewport units convert

CSS fixes the ratio between points and pixels: one inch is 96px and also 72pt, so 1pt is exactly 4/3 px and 12pt equals 16px. Viewport units are percentages of the viewport, so 1vw is 1% of the viewport width and 1vh is 1% of its height. Set the viewport fields to the screen you are targeting to see what a vw or vh value really measures there.

For physical and everyday measurements like centimeters, inches or miles, use the Unit Converter instead.

Related tools

Tools that share a tag with this one.

Number Base Converter

Convert numbers between binary, octal, decimal, hexadecimal and any base up to 36. Type into any field and the others update as you go. Handles huge integers without losing precision and accepts 0x, 0b and 0o prefixes.

devconvertercalculator

Aspect Ratio Calculator

Enter a resolution to get its simplified aspect ratio, or start from a ratio and one side to get the missing dimension. Knows the common ratios like 16:9, 4:3 and 21:9 and shows how close your size is to each.

calculatorimagedev

Base Encoder & Decoder

Encode and decode Base16, Base32, Base36, Base45, Base58, Base62, Base64 and Base85. Pick the alphabet variant you need, from Crockford Base32 to Bitcoin Base58 and Ascii85, and convert in either direction.

devconvertertext

Base64 Encoder & Decoder

Decode Base64 to text or encode text to Base64. Paste into the top box, read the result below, and flip the direction with one click. Handles Unicode correctly, reads URL-safe Base64, and shows binary payloads as a hex dump you can download.

devconvertertext

Bitwise Calculator

Calculate AND, OR, XOR, NOT and bit shifts with a live binary view of every operand and the result. Enter numbers in decimal, hex, octal or binary and see each bit line up as you type.

calculatordev

Chmod Calculator

Convert Unix file permissions between checkboxes, octal like 755 and symbolic notation like rwxr-xr-x, all kept in sync as you edit any of them. Covers setuid, setgid and the sticky bit, and shows the matching chmod command ready to copy.

devcalculator