CSS Unit Converter

What is CSS Unit Conversion?

A CSS unit converter is a tool that translates length values between different CSS measurement systems. CSS defines over a dozen length units, split into two groups: absolute units like px, pt, cm, and in that map to fixed physical measurements, and relative units like rem, em, vw, vh, and % that depend on context such as font size or viewport dimensions.

Browsers resolve all CSS lengths to pixels during rendering. When you write 1.5rem, the browser multiplies 1.5 by the root font-size (typically 16px) to get 24px. When you write 50vw, it takes half the current viewport width. Understanding these relationships is necessary for building layouts that scale across devices and respect user preferences like custom font sizes set in the browser.

The CSS Values and Units Module Level 4 specification (W3C) defines the exact conversion ratios between all absolute units: 1in = 96px = 72pt = 2.54cm = 25.4mm. Relative units have no fixed ratio because they depend on runtime context. A free CSS unit converter lets you calculate these relationships instantly given your specific root font-size and viewport dimensions, without writing any code.

Why Use a CSS Unit Converter?

Converting between CSS units by hand means remembering ratios, pulling up a calculator, and double-checking your math. This tool does the conversion in your browser with zero friction.

CSS Unit Converter Use Cases

CSS Length Units Reference

CSS defines 10 commonly used length units. Absolute units have a fixed conversion to pixels. Relative units depend on context: the root font-size for rem, the parent font-size for em, and the browser viewport for vw and vh.

Absolute vs Relative CSS Units

Choosing between absolute and relative units affects how your layout responds to different screens and user settings. Each group has distinct trade-offs.

Common px to rem Conversion Table

This table assumes a root font-size of 16px (the browser default). If your project uses a different base, divide the pixel value by your base to get the rem equivalent.

Code Examples

These examples show how to convert CSS units programmatically in JavaScript, Python, CSS custom properties, and Sass.

// px to rem (given root font-size of 16px)
const pxToRem = (px, base = 16) => px / base
pxToRem(24)  // → 1.5

// rem to px
const remToPx = (rem, base = 16) => rem * base
remToPx(1.5) // → 24

// px to vw (given viewport width of 1440px)
const pxToVw = (px, viewport = 1440) => (px / viewport) * 100
pxToVw(360)  // → 25

// Dynamic calculation using getComputedStyle
const rootFontSize = parseFloat(
  getComputedStyle(document.documentElement).fontSize
) // → 16 on most browsers

# CSS unit converter functions

def px_to_rem(px: float, base: float = 16) -> float:
    return px / base

def rem_to_px(rem: float, base: float = 16) -> float:
    return rem * base

def px_to_vw(px: float, viewport: float = 1440) -> float:
    return (px / viewport) * 100

def px_to_pt(px: float) -> float:
    return px * 72 / 96

print(px_to_rem(24))     # → 1.5
print(rem_to_px(2.5))    # → 40.0
print(px_to_vw(720))     # → 50.0
print(px_to_pt(16))      # → 12.0

/* Define a base scale using rem */
:root {
  --base: 16px;       /* root font-size */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-4: 1rem;    /* 16px */
  --space-8: 2rem;    /* 32px */
}

/* Fluid typography: scales between 1rem (16px) and 2.5rem (40px) */
h1 {
  font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Viewport-relative hero height */
.hero {
  height: calc(100vh - 4rem); /* full viewport minus 64px header */
}

/* Percentage-based grid */
.sidebar { width: 25%; }     /* 360px on 1440px screen */
.content { width: 75%; }     /* 1080px on 1440px screen */

// Reusable px-to-rem function in Sass
@use "sass:math";

$base-font-size: 16px !default;

@function rem($px) {
  @return math.div($px, $base-font-size) * 1rem;
}

// Usage
.card {
  padding: rem(24px);       // → 1.5rem
  margin-bottom: rem(32px); // → 2rem
  border-radius: rem(8px);  // → 0.5rem
  font-size: rem(14px);     // → 0.875rem
}

Frequently Asked Questions