CSS px to rem Converter

About this tool

CSS px to rem Converter rewrites the length units in a whole stylesheet, not just one number. Paste CSS, SCSS, or LESS and every px length becomes rem — divided by the root font size you choose — while comments, quoted strings, url() paths, selectors, and your exact indentation come back untouched. Everything runs in your browser through WebAssembly; the CSS never leaves your machine.

Rem lengths scale with the reader's browser font-size setting, so a layout built in rem respects someone who has bumped their default text size up for readability — the main accessibility reason teams migrate a px stylesheet in the first place.

You can also run it backwards (rem → px), which is handy when you inherit a rem-based theme and need concrete pixel values for a design handoff.

Options

• Root font size — what 1rem stands for. Browsers default to 16; pick 10 if your stylesheet uses the html { font-size: 62.5% } trick.
• Decimal places — 0–10, default 5. Trailing zeros are always trimmed, so 0.50000rem prints as 0.5rem.
• Properties to convert — * converts everything (default). Narrow it with a comma-separated list that accepts wildcards: font* (prefix), *width (suffix), *margin* (contains), an exact name like line-height, and a leading ! to exclude — *,!border* converts everything except border properties.
• Minimum px value — leave small lengths alone. Setting 2 is the usual way to keep 1px hairline borders crisp in px.
• Convert inside @media conditions — off by default, because breakpoints are commonly kept in px.
• Skip rules whose selector contains — comma-separated substrings; any rule (or block) whose selector matches is passed through in its original units.
• Keep original as a fallback declaration — emits the px declaration and the rem one as a pair.
• Write zero as 0 — on by default, so 0px becomes a bare 0 rather than 0rem.

Example

Input, with the defaults (root font size 16, all properties):

.btn {
  font-size: 24px;
  padding: 8px 16px;
  margin: 0px;
  border: 1px solid #ccc;
}

Output:

.btn {
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
  margin: 0;
  border: 0.0625rem solid #ccc;
}

Set Minimum px value to 2 and that last line stays border: 1px solid #ccc; instead.

Common conversions at a 16px root

Limits and edge cases

• Declaration values only. Selectors and at-rule preludes are never rewritten, except @media conditions when you opt in.
• Case-sensitive unit match. A capitalized unit is the per-value escape hatch: 16Px and 16PX are valid CSS and are left alone, so you can pin one value without touching the options.
• Never touched: text inside /* comments */, quoted strings, url(...) payloads, hex colors, and identifiers that merely contain the letters (--gap-16px, translate3d).
• em is deliberately unsupported — em resolves against the parent element's computed font size, which no stylesheet rewriter can know. Converting px→em against the root would produce numbers that look right and render wrong.
• It's a forgiving rewriter, not a validator: unbalanced braces are passed through as-is rather than rejected, so a malformed stylesheet comes back roughly as it went in.
• Very large stylesheets are limited only by your browser's memory — there is no server-side size cap because there is no server.

FAQ