Skip to main content
{/}codefunc
CSS & DesignRuns locally

CSS Unit Converter

Convert between px, rem, em, pt, and % with a configurable root size.

About this tool

Convert between px, rem, em, pt, and % with a configurable root size. Experiment with motion, layout, and color in real time — then copy values into your stylesheet.

Enter a value with a unit (16px, 1.5rem, 12pt, …). Set the root font size if your project does not use the default 16px. Example — px to rem at 16px root: try `16px (root 16)` and expect something like `16px = 1rem = 1em = 12pt`.

em conversion assumes the parent font size equals the root unless you adjust mentally. See also: CSS Clamp Calculator, and Color Converter. Runs in your browser — nothing you paste gets uploaded.

How to use

  1. Enter a value with a unit (16px, 1.5rem, 12pt, …).
  2. Set the root font size if your project does not use the default 16px.
  3. Read the equivalents in px, rem, em, pt, and % where applicable.
  4. Copy the unit your design tokens or Tailwind config expects.

Example

px to rem at 16px root

Input

16px (root 16)

Output

16px = 1rem = 1em = 12pt

Limitations

  • em conversion assumes the parent font size equals the root unless you adjust mentally.
  • % conversion depends on the property context (width vs font-size) and is approximate.
  • Viewport units (vw/vh/dvh) are not the focus of this converter.

Related guides

1

Related tools

2

Frequently asked questions

What does the CSS Unit Converter do?

Convert between px, rem, em, pt, and % with a configurable root size. Runs in your browser — no install, no account.

How do I use the CSS Unit Converter?

Enter a value with a unit (16px, 1.5rem, 12pt, …). Set the root font size if your project does not use the default 16px. Read the equivalents in px, rem, em, pt, and % where applicable. Copy the unit your design tokens or Tailwind config expects.

Is the CSS Unit Converter free?

Yes. No signup, no usage limits, no paywall.

Does the CSS Unit Converter upload my data?

No. Processing happens locally in JavaScript. Your input is not uploaded, stored, or logged.

What are the limitations of the CSS Unit Converter?

em conversion assumes the parent font size equals the root unless you adjust mentally. % conversion depends on the property context (width vs font-size) and is approximate. Viewport units (vw/vh/dvh) are not the focus of this converter.

Search tools

Find a developer tool