CSS Unit Converter
Convert a CSS length between px, rem, em, pt, %, vw and vh.
CSS Unit Converter — Convert one CSS length value into px, rem, em, pt, %, vw and vh all at once. Set the root font size, the parent font size and the viewport width and height, then type a value and pick its unit to see every equivalent instantly. Everything is computed in your browser, so nothing you type is ever uploaded.
What is CSS Unit Converter?
The CSS Unit Converter is a free in-browser tool that translates a single CSS length into seven common units: px, rem, em, pt, %, vw and vh. Front-end developers and web designers use it to move a layout between absolute pixels and responsive units, to check what a rem maps to under a custom root font size, or to turn a print-style pt value into screen pixels. Because rem depends on the root font size, em and % depend on the parent font size, and vw/vh depend on the viewport, the converter exposes all four as adjustable settings. Type a value, choose its From unit, and every result field updates at once. A ready-to-paste CSS snippet lists all seven equivalents as font-size declarations.
How to use CSS Unit Converter
- Open Settings and set the root font size (the html font-size that rem is based on), the parent font size (used for em and %), and the viewport width and height (used for vw and vh).
- Type the number you want to convert into the value input.
- Pick the source unit from the From dropdown: px, rem, em, pt, %, vw or vh.
- Read each equivalent in the labeled, read-only result fields; they all recalculate automatically as you change the value, the unit, or any setting.
- Copy the generated CSS snippet to paste all seven font-size equivalents straight into your stylesheet.
Examples
px to rem at root 16
Input
Root 16px, value 16, From px
Output
rem = 1
rem to px at root 10
Input
Root 10px, value 2, From rem
Output
px = 20
px to pt
Input
value 16, From px
Output
pt = 12
Frequently asked questions
- Which units does it convert between?
- Seven CSS length units: px, rem, em, pt, %, vw and vh. Any one of them can be the source, and all seven equivalents are shown at the same time.
- Why do I have to set root, parent and viewport sizes?
- These units are relative. rem is a multiple of the root (html) font size, em and % are relative to the parent font size, and vw/vh are percentages of the viewport width and height. Setting these in Settings tells the converter what each relative unit resolves to.
- How is pt handled?
- CSS defines 96px = 1in = 72pt, so 1pt equals 4/3 px and 1px equals 0.75pt. The converter uses that fixed ratio, independent of font size or viewport.
- What happens if a value or setting is invalid?
- If the value is not a finite number, or if any of the root, parent or viewport sizes is missing, zero or negative, the result fields show a dash (—) until you provide valid numbers.
- Is anything sent to a server?
- No. All conversions run entirely client-side in your browser with no upload and no server calls, so the values you enter never leave your device.
Related tools
Aspect Ratio Calculator
Enter a width or height with a target aspect ratio and instantly get the matching dimension plus the simplified ratio.
Number Base Converter
Convert numbers between binary, octal, decimal and hexadecimal.
Base64 File Converter
Encode any file or image to a Base64 data URI and decode a data URI back into a downloadable file.
BMI Calculator
Calculate your Body Mass Index from height and weight in metric or imperial units and see the matching WHO weight category instantly.