Paste CSS and set how many pixels one rem is worth. Only the lengths of declaration values are converted; selectors, strings, comments and url() stay as they are.
Runs locally in your browserPaste a stylesheet and set how many pixels one rem is worth. The page rewrites the px lengths and prints the result through the same formatting pass it always used — nothing is uploaded.
The division is exact: 16px with a 16px base is 1rem, 1.5px becomes 0.09375rem, and a base such as 16.5px is used as written instead of being rounded.
Lengths are converted inside declaration values — padding, width, font-size, calc() expressions, custom properties — and inside media, container and supports queries. A value counts when a number is followed by the px unit, in any case, so 10PX converts as well.
Fractional values convert as written: 1.5px becomes 0.09375rem with a 16px base and .5px becomes 0.03125rem. The result is the exact quotient while the division terminates; a repeating quotient, such as 10px with a 16.5px base, is rounded to twelve decimal places.
Selectors, class names, strings, comments and the body of url() are copied through untouched, so content: "10px", .a10px and url(icon-10px.png) survive a conversion.
The tool moves px values to rem and nothing else. A rem value in the input stays as it is, there is no rem-to-px direction, and other units such as em, %, vw or pt are not touched.
An empty stylesheet, an empty base, a base of zero or below and a base that is not a number are all refused: the message appears in the status line under the controls, and the previous result is cleared so an old conversion cannot be mistaken for a new one.
A stylesheet without a single px value is reported as such, and the formatted CSS is still printed. The CSS is reformatted as it always was — minified when the input is one line, indented when it has more. Messages follow the page language: English, Spanish, Portuguese (Brazil), German, French or Japanese.