px → remValues · tables · stylesheets

PX to REM converter

Convert a single value either way, look it up in a table, or paste a whole stylesheet and convert every px length at once.

Quick convert

Root font size

16px is the browser default. Use 10 if your CSS sets html { font-size: 62.5% }.

Pixels

rem

24px ÷ 16px = 1.5rem

Conversion tables

at 16px

Pixels to rem
px	rem
1px	0.0625rem
2px	0.125rem
4px	0.25rem
6px	0.375rem
8px	0.5rem
10px	0.625rem
12px	0.75rem
14px	0.875rem
16px	1rem
18px	1.125rem
20px	1.25rem
24px	1.5rem
32px	2rem
40px	2.5rem
48px	3rem
64px	4rem

rem to pixels
rem	px
0.125rem	2px
0.25rem	4px
0.375rem	6px
0.5rem	8px
0.625rem	10px
0.75rem	12px
0.875rem	14px
1rem	16px
1.125rem	18px
1.25rem	20px
1.5rem	24px
1.75rem	28px
2rem	32px
2.5rem	40px
3rem	48px
4rem	64px

Convert a stylesheet

Keep values up to

px in media queries

Decimal places

Skip properties

Keeping values up to 1px leaves hairline borders and 1px offsets sharp. Set it to 0 to convert everything.

Your CSS (paste, or drop a .css file)

Converted

/* Card: spacing on a 4px grid */
.card {
  padding: 1.5rem 1rem;
  margin: 0 auto 2rem;
  border: 1px solid #d0d7de;
  border-radius: 0.75rem;
  font: 600 1.125rem/1.4 system-ui, sans-serif;
  background: url("img/dots-16px.png") 0.5rem 0 repeat;
  box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 0.1);
}
.card::before {
  content: "16px";
}
@media (min-width: 768px) {
  .card {
    gap: 1.25rem;
    width: calc(100% - 3rem);
  }
}

11 converted
1 kept (≤ 1px)
1 kept in media queries

What gets converted, and what never does

rem is relative to the root font size, so a layout written in rem grows when a visitor raises their browser's default text size, while px stays fixed. The stylesheet converter reads your CSS the way a browser tokenizes it and only rewrites px lengths inside declaration values, including custom properties and calc().

Never touched: anything inside url(), quoted strings and comments, and selectors such as .w-16px.
Small values up to the threshold stay in px, so 1px borders do not become blurry fractions.
Media queries stay in px unless you choose otherwise. If you convert them, they are divided by 16, because rem and em in a media query always use the browser's default size, not your root font size.
Skip properties takes a comma-separated list; end a name with * to match a prefix.

px and rem questions

Should I use rem or em?

rem for most sizes, because it always refers to the root. em refers to the element's own font size, which suits padding on buttons that should grow with their text but compounds when nested.

Is 0px converted?

It becomes 0, or 0rem inside calc() and similar functions, where a unitless zero would make the expression invalid.

Does it handle Sass or Less?

Mostly, because their syntax is close to CSS: px values in declarations are converted and comments are skipped. Check mixins and functions that do arithmetic on px values by hand.