Skip to main content
DevFreeBy Daniel BeglaryanUpdated August 2026

Convert CSS Units

Convert between px, rem, em, pt, %, and viewport units with your own root and parent font-size.

PrivateWorks OfflineNo Account
Reference settings
px
px
px
px
Converting
16px equals

How these are worked out

  • rem scales with the root font-size (16px), so 16px = 1rem.
  • em and % scale with the parent font-size (16px) — 100% = 1em = 16px.
  • ptis a fixed ratio: 1pt = 1⁄72in and 1px = 1⁄96in, so 1pt ≈ 1.333px regardless of settings.
  • vw / vh / vmin / vmax use the reference viewport (1920×1080px). 1vw = 19.20px, 1vh = 10.80px.
A percentage is treated here as a share of the parent font-size (100% = 1em). For width or height, a real CSS percentage is instead relative to its containing block — a different reference this tool doesn’t know.
Deep dive

About Convert CSS Units.

Convert Any CSS Unit to Every Other One

Type a value in px, rem, em, pt, %, or a viewport unit (vw, vh, vmin, vmax) and see the exact equivalent in all of them at once. The math pivots through the CSS reference pixel, so the numbers match what the browser actually renders — not a rounded lookup table.

What makes this reliable is that you control the reference. rem depends on your root font-size, em and % depend on the parent font-size, and viewport units depend on the viewport dimensions. Set those to match your project (or click "Use my screen size") and every conversion is correct for your context, not a generic 16px assumption. Click any result to copy it with its unit.

Common Use Cases

  • px to rem for accessible type: Convert a design handed to you in pixels into rem so it scales with the user's browser font-size setting.
  • The 62.5% root trick: Set the root font-size to 10px and read rem values as clean tenths (1.6rem = 16px) without doing the division in your head.
  • Points from a print or Figma spec: Turn a 12pt or 14pt type size into the px value CSS expects (1pt = 1.333px at 96dpi).
  • Fluid layouts: Check what a px width becomes in vw at 1920, 1440, or your own viewport before writing a clamp() or media query.
  • em nesting sanity checks: See how a value behaves when the parent font-size isn't the default 16px, so nested em values don't surprise you.
  • Design-to-code handoff: Paste one number and copy the whole set of equivalents to drop straight into a stylesheet or a comment.

Privacy: This runs entirely in your browser with plain JavaScript math. Nothing is uploaded, there is no signup, and no value you enter ever leaves your device.

Three steps

How to use Convert CSS Units.

01

Upload your file

Drag and drop or click to select your file.

02

Choose settings

Adjust quality, size, or format options.

03

Download result

Your processed file is ready instantly.

More in Dev

Related dev tools.

Why CipherForces

Privacy-first tools that work everywhere.

100% Private
From $39
Works Offline
No Account
188 Tools

Need more than a tool?

Custom websites and web apps that you own — from $799 one-time.

Explore all 188 tools