Tools
Dev & Design
px → rem Converter
Convert CSS units instantly — single values, bulk paste, Tailwind scale & breakpoint reference.
Basepx
Property
Quick convert
px
=1
remBulk convert
Test data
Breakpoints
| Name | px | rem | |
|---|---|---|---|
| sm | 640 | 40 | |
| md | 768 | 48 | |
| lg | 1024 | 64 | |
| xl | 1280 | 80 | |
| 2xl | 1536 | 96 |
Tailwind scale
Click any row to copy CSS snippet
How it works
rem (root em) is relative to the document's root font size, usually set on <html>. The default browser font size is 16px, making 1rem = 16px. Changing the base updates every calculation instantly.
- →Typography scale — Convert your designer's px specs to scalable rem values
- →Responsive spacing — rem-based gaps/padding scale with user font preferences
- →Accessibility compliance — rem respects browser zoom; px does not
- →Tailwind custom config — Find the exact scale value for a custom px size
- →Design token migration — Bulk-convert a design system from px to rem
- →Media queries — Convert px breakpoints to rem for font-size-aware queries
- →Legacy code refactor — Paste a CSS block's px values, get them all as rem
How it works▾
rem (root em) is relative to the document's root font size, usually set on <html>. The default browser font size is 16px, making 1rem = 16px. Changing the base updates every calculation instantly.
- →Typography scale — Convert your designer's px specs to scalable rem values
- →Responsive spacing — rem-based gaps/padding scale with user font preferences
- →Accessibility compliance — rem respects browser zoom; px does not
- →Tailwind custom config — Find the exact scale value for a custom px size
- →Design token migration — Bulk-convert a design system from px to rem
- →Media queries — Convert px breakpoints to rem for font-size-aware queries
- →Legacy code refactor — Paste a CSS block's px values, get them all as rem