CSS PX to REM Converter

How do you convert a whole stylesheet from pixels to rem?

Paste a stylesheet into CSS input, choose rem — relative to root, and enter your page's computed root font size. The formula is rem = pixel value ÷ root font size in pixels. At the initial 16px base, padding: 24px 8px becomes padding: 1.5rem 0.5rem. Output updates as you type or change settings; there is no separate conversion button.

This example uses the default settings: rem output, a 16px base, four decimal places, no minimum threshold, protected media conditions, and protected one-pixel borders. Paste the complete rule, including its selector and braces:

.card {
  padding: 24px 8px;
  margin-top: -12px;
  border: 1px solid;
  width: calc(100% - 32px);
  --gap: 16px;
  content: "16px";
}

The converted stylesheet is:

.card {
  padding: 1.5rem 0.5rem;
  margin-top: -0.75rem;
  border: 1px solid;
  width: calc(100% - 2rem);
  --gap: 1rem;
  content: "16px";
}

The two padding dimensions change within one declaration. The negative margin keeps its direction, the border exception retains its pixel width, and quoted content stays literal text. Four declarations change: padding, margin-top, width, and the custom property. The number displayed under Changed declarations counts changed declarations or media conditions, rather than individual pixel tokens.

Which pixel values should stay unchanged?

A thin border, an alignment correction, and a layout breakpoint may need different migration decisions. Keep 1px borders and outlines starts checked. It protects dimensions whose absolute pixel value is exactly one in border, outline, and their hyphenated properties. It does not protect every one-pixel measurement: padding: 1px becomes padding: 0.0625rem at the default base. A larger border remains eligible unless another rule excludes it.

Use Minimum absolute px to preserve small dimensions across eligible declarations. The comparison is strictly below the threshold, so a value equal to the minimum still converts. Negative values use their absolute magnitude. These examples use a minimum of 8, a 16px base, and the default border exception:

Threshold and border exceptions at a 16px base

Input declaration	Output declaration	Reason
margin: -4px 8px	margin: -4px 0.5rem	Only the second magnitude reaches the threshold
margin-top: -8px	margin-top: -0.5rem	Equality qualifies, including negative lengths
padding: 0px	padding: 0px	Zero is below the threshold
border-width: 1px	border-width: 1px	The threshold and border protection both preserve it

With the initial minimum of zero, eligible 0px becomes 0rem. Unitless zero stays unitless because it is not a pixel token. A stylesheet can therefore contain both converted relative units and intentionally retained pixel dimensions. Review those exceptions rather than assuming every occurrence of the letters px should disappear.

How do property filters control a migration?

Only these properties (empty = all) limits conversion to the names you enter. Leave it empty for all eligible properties, or enter font-size, line-height for a typography pass. Keep px for these properties excludes named properties, taking precedence when a property appears in both fields. Separate names with commas or spaces; a trailing asterisk matches a prefix.

For example, allow margin*, padding* and exclude margin-top to convert spacing while retaining that particular offset. Enter border*, box-shadow in the keep-px field to protect all border-prefixed properties and the exact box-shadow property. An exact name does not automatically include its longhands: margin alone does not match margin-left. Ordinary property matching ignores letter case, while custom property names remain case-sensitive.

Custom properties containing pixel dimensions also convert. A declaration such as --gap: 16px becomes --gap: 1rem at the initial base. A later gap: var(--gap) contains no literal pixel dimension to replace. Check every use of a converted variable yourself: the tool neither follows references nor decides whether a token belongs to spacing, typography, or another design-system category.

How are CSS strings, comments, and functions protected?

The converter tokenizes CSS instead of replacing every text fragment ending in px. Quoted strings, block comments, and complete url() contents remain untouched. Selector text such as .icon16px also stays unchanged. This distinction protects generated content, comments explaining design measurements, and embedded image data from accidental edits.

Pixel dimensions inside ordinary math functions remain eligible. At a 16px base, calc(100% - 32px) becomes calc(100% - 2rem); percentages and punctuation stay in place. Existing rem, em, percentage, and other non-pixel tokens are retained. Signed values, decimal pixel dimensions, uppercase PX, and exponent notation are recognized, but the converter does not evaluate the resulting expression or inspect its rendered size.

Paste complete CSS rules rather than only a bare declaration list. Declaration conversion operates inside blocks. The tool preserves indentation, selectors, declaration order, and surrounding punctuation instead of reformatting your stylesheet. It also handles nested rules and declarations without a final semicolon, but that structural handling is not a promise to compile a preprocessor language.

How should you choose between rem and em?

Under CSS Values and Units, rem refers to the root element's font size. Em depends on context: for font-size it refers to the parent, while many other lengths use the element's own computed font size. Choosing em — supplied font context changes the base field to Font context size (px). The same division is used, with em appended instead of rem.

One supplied context applies throughout the pasted stylesheet. The converter does not read your page, match selectors, or calculate inheritance. If two components use different relevant font sizes, process them separately when converting to em. Obtain the actual computed root or context size from your application rather than assuming the initial 16px value applies everywhere. Use the PX to REM Converter for individual measurements or reverse arithmetic.

What changes when you include media conditions?

By default, an @media condition stays in pixels while declarations inside its block convert. Check Convert px in @media conditions to include its pixel dimensions. For example, at a 16px base, @media (min-width: 768px) becomes @media (min-width: 48rem). The minimum threshold still applies to those dimensions, but property allow and keep-px lists govern declarations rather than media conditions.

Relative font units in media queries use the initial font size under Media Queries, which can differ from a root size declared in your stylesheet. The converter uses the same entered base for conditions and declarations; it does not detect this difference. Convert conditions separately if they require another base, and test where the resulting layout actually switches. This option specifically targets @media headers, not every kind of CSS conditional rule.

What rounding, errors, and export limits should you check?

Decimal precision (0–8) accepts whole numbers from zero through eight and starts at four. It controls the maximum fractional digits, not a fixed number of trailing zeros. At a 16px base, a 3px padding converts to 0.1875rem with the default precision and 0.19rem with precision two. Low precision can round a small dimension to zero, so review delicate spacing before export.

The base must be finite and greater than zero; the minimum must be finite and nonnegative. Unclosed strings, comments, URLs, blocks, parentheses, or brackets, and unexpected closing delimiters produce errors. Pixel values or conversion results that exceed finite numeric range also fail. An error clears the converted output and prevents export of a partial result. These checks do not validate every CSS property, value, or layout relationship.

Review Changed declarations, then copy the full Converted CSS output or select Download .css to save styles.converted.css. Conversion runs locally in the browser; pasted CSS is not uploaded for processing. Keep the original stylesheet and compare the result in your application at relevant text sizes and viewport widths. After checking behavior, use the CSS Minifier if you also need compact formatting, or browse other developer tools for separate editing tasks.