CSS Unit Converter
12 toolsConvert between px, rem, pt, and percent.
Runs in your browser — your files and text stay on your device
Design Flexbox and Grid layouts, shadows, animations, easing curves, filters, and glassmorphism effects with live controls and a live preview instead of guessing values by hand — copy the generated CSS straight into your stylesheet.
Flexbox PlaygroundGrid GeneratorBox ShadowText ShadowBorder RadiusClip PathGlassmorphismAnimationEasing CurveFilterFluid TypographyUnit Converter
px
16px
rem
1rem
pt
12.00pt
%
100.00%
How to use this tool
- 1Enter a pixel value, and your root font size if it's not the browser default (16px).
- 2See the equivalent rem, pt, and percentage values instantly.
- 3Click Copy next to any value to grab it.
Frequently asked questions
Why does rem depend on the root font size?
1rem always equals the <html> element's font size. If a page sets a custom root font size (common for scalable typography systems), rem values scale relative to that instead of the browser default 16px.
When should I use rem instead of px?
rem respects a user's browser font-size preference (accessibility) and scales consistently if you change the root font size — generally preferred for typography and spacing over fixed px.
Is this calculated on a server?
No — it's plain JavaScript math running in your browser.