π Runs in your browser β nothing is uploadedβ Free, no signup
PX to REM Converter
Convert pixels to rem and rem to pixels for any root font size β or paste a stylesheet to convert every px value at once.
24px = 1.5rem when the root font size is 16px.
Convert a stylesheet
Result
.card {
padding: 1.5rem 2rem;
font-size: 0.875rem;
border: 1px solid #ddd;
margin-bottom: 0;
}Conversion table (16px root)
When should you use the PX to REM Converter?
- Turning pixel values from a design file into accessible rem units
- Migrating an existing stylesheet from px to rem
- Checking what a rem value equals in pixels
How to use the PX to REM Converter
- 1
Set the root font size
Leave it at 16px (the browser default) or enter your site's html font size.
- 2
Convert a single value
Type in the px box to get rem, or in the rem box to get px.
- 3
Convert a whole stylesheet
Paste CSS into 'Convert a stylesheet'. Every px value is replaced with rem.
- 4
Copy the result
Click Copy CSS to copy the converted stylesheet.
Examples
Converting CSS (16px root)
Before
.card {
padding: 24px 32px;
font-size: 14px;
border: 1px solid #ddd;
}After
.card {
padding: 1.5rem 2rem;
font-size: 0.875rem;
border: 1px solid #ddd;
}Common errors and how to fix them
Converted sizes look wrong on my site- Your site may change the root font size (for example html { font-size: 62.5% } makes 1rem = 10px). Set Root font size to match.
Media queries behave differently after converting- In media queries, rem and em are always based on the browser's default font size, not your html font-size rule.
Explore More Developer Tools
Format, Validate, and Generate Data Instantly
TrueFormatter provides essential utilities for modern web development, including JSON formatting, YAML conversion, and more.
JSON Auto-Fixer & Formatter
Repair, validate, and beautify broken JSON (missing quotes, trailing commas).
JSON Validator & Linter
Check JSON syntax and see the exact line and column of every error.
JSON Beautifier
Pretty-print and indent JSON for easy reading and debugging.
JSON Compare & Diff Tool
Find the difference between two JSON objects visually and quickly.
JSONPath Tester
Evaluate JSONPath expressions with filters and recursive queries.
JSON Schema Generator
Generate a JSON Schema from any sample JSON document.
JSON to CSV Converter
Flatten nested JSON arrays into CSV for spreadsheets.
YAML β JSON Converter
Convert YAML to JSON or JSON to YAML instantly.
CSV to JSON Converter
Convert CSV or TSV data to a JSON array of objects, with type detection.
JSON to TypeScript
Generate TypeScript interfaces from any JSON sample.
JWT Decoder
Decode and inspect JSON Web Tokens (JWT) Header and Payload.
JWT Generator
Create and sign HS256/HS384/HS512 JSON Web Tokens for testing.
Hash Generator (MD5, SHA)
Generate MD5, SHA-1, SHA-256, SHA-384 and SHA-512 hashes.
Password Generator
Generate strong, random passwords with the length and characters you choose.
Base64 Encoder β Decoder
Encode text to Base64 and decode Base64 to text for API debugging.
URL Encoder & Decoder
Cleanly encode special characters in URLs and decode query strings.
SQL Formatter & Beautifier
Format SQL queries for MySQL, PostgreSQL, SQL Server, SQLite and more.
CSS Minifier & Compressor
Optimize CSS by removing whitespace and comments to accelerate page load time.
JS Minifier & Compressor
Compress JavaScript to improve website speed and performance.
HTML Formatter & Beautifier
Beautify or minify HTML with clean, consistent indentation.
Markdown Editor & Preview
Write Markdown with a live preview and copy the HTML.
Word & Character Counter
Count words, characters, sentences and reading time as you type.
Case Converter
Convert text to camelCase, snake_case, kebab-case, Title Case and more.
Text Diff & Compare
Compare two texts and highlight every added and removed word or line.
Lorem Ipsum Generator
Generate placeholder paragraphs, sentences or words as text or HTML.
Fancy Text & Font Generator
Turn text into ππ¨π₯π, πͺπ΅π’ππͺπ€, ππΈππΎπ π and other Unicode font styles you can paste anywhere.
Color Picker & Converter
Pick a color and convert between HEX, RGB and HSL instantly.
Color Palette Generator
Generate harmonious color palettes and export them as CSS, Tailwind or JSON.
CSS Gradient Generator
Build linear and radial CSS gradients visually and copy the code.
PX to REM Converter
Convert pixels to rem and rem to pixels for any root font size.
Regex Tester & Debugger
Test JavaScript regular expressions with live match highlighting and groups.
Cron Expression Generator
Build cron schedules, read them in plain English and preview next runs.
UUID / GUID Generator
Generate unique V4 UUIDs for database keys or testing.
Epoch converter online
Convert UNIX timestamps to human-readable dates and back instantly.
Time Zone Converter
Convert a time between time zones and compare cities side by side.
Random Number Generator
Generate random numbers in any range β unique, sorted or decimals.
Crop Image Online
Crop images exactly as selected with fixed aspect ratios. No upload, no resize, no quality loss.
Compress Image Online
Compress JPG, PNG & WebP images directly in your browser. No upload, no tracking, instant download.
Image Resizer
Resize images to exact pixels or a percentage, keeping the aspect ratio.
Image Converter (PNG, JPG, WebP)
Convert images between PNG, JPG and WebP in your browser.
Image to Base64
Convert an image to a Base64 data URI for CSS, HTML or JSON.
PX to REM Converter FAQ
Divide the pixel value by the root font size. With the default root size of 16px, 24px Γ· 16 = 1.5rem. To go back, multiply: 1.5rem Γ 16 = 24px.
It's the font size of the <html> element. Browsers default to 16px, but users can change it in their settings, and some sites set html { font-size: 62.5% } to make 1rem = 10px. Enter your site's value to convert correctly.
rem units scale with the user's browser font-size setting, so text and spacing grow for people who need larger text. That makes layouts more accessible than fixed pixels.
rem is relative to the root (<html>) font size everywhere on the page. em is relative to the font size of the current element, so it compounds when elements are nested.
Usually not. Hairline borders are meant to stay 1px at any text size, which is why the stylesheet converter keeps values of 1px or less by default. Untick the option to convert them too.
Yes. Paste CSS into 'Convert a stylesheet' and every px value is replaced with its rem equivalent. 0px becomes 0.