CSS Unit Converter
Convert a length between the four common CSS units px, rem, em, and pt, and see the result in all of them at once. Set the root font size that rem and em are measured against, which defaults to 16px, then enter a value and pick its starting unit. Every conversion runs in your browser, so nothing you type is uploaded.
How to convert CSS units
- Enter the length you want to convert in the 'Value' field.
- Pick the unit you are starting from in the 'From unit' menu: px, rem, em, or pt.
- Adjust 'Root font size (px)' if your project's root is not the default 16.
- Read the equivalent in all four units in the result grid.
- Copy any single result with its Copy button.
Examples
Pixels to rem
16px at root font size 16
1rem (also 1em and 12pt)
Points to pixels
12pt at root font size 16
16px (also 1rem and 1em)
A larger value at the default root
24px at root font size 16
1.5rem, 1.5em, 18pt
Frequently asked questions
How do you convert px to rem?
Divide the pixel value by the root font size. At the default root of 16px, 16px is 1rem, 24px is 1.5rem, and 8px is 0.5rem. Change the root font size field to match a project that overrides it.
How many pixels is 1pt?
CSS defines 1pt as 1/72 of an inch and 1 inch as 96px, so 1pt equals 96/72 px, about 1.3333px. That makes 12pt exactly 16px and 24px exactly 18pt.
Does the root font size affect the pt conversion?
No. pt is an absolute unit tied to inches, so px and pt convert with a fixed 96/72 factor regardless of the root font size. Only rem and em depend on the base you set.
What is the difference between rem and em?
rem is relative to the root font size, while em is relative to the font size of the element it is used on. This converter treats both against the single base you enter, which matches the common case but not deeply nested em.
Why can real em values differ from this tool?
In a real page, em compounds: an element inside another that sets 1.25em inherits a larger reference size, so nested em can drift from the root. Here em always uses the base you set, so verify nested layouts in the browser.
Why use rem instead of px?
rem scales with the user's root font size, so type and spacing respect browser zoom and accessibility settings. Sizing in rem keeps a layout proportional when someone increases their default font size.
Which units does this support?
Only px, rem, em, and pt. It does not handle percentages, viewport units like vw and vh, or ch, because those depend on layout context that a standalone converter cannot know.
How precise are the results?
Conversions use full floating-point math and the display rounds to four decimal places, trimming trailing zeros. Clean cases like 16px to 1rem stay exact, while thirds such as 10px to pt round for readability.
Is anything sent to a server?
No. The conversion runs entirely in your browser, so your values never leave your device.
Learn more
- px, rem, em, and pt in CSS: A Practical Guide
Understand absolute versus relative CSS units, why rem aids accessibility, how em compounds when nested, and where pt still belongs.
Related tools
Color Mixer
Mix two hex colors online and get the blend. Set the mix ratio with a slider to find the perfect in-between color, then copy the hex result.
Gradient Generator
Generate CSS gradient code from color stops online. Pick colors, set the angle, switch between linear and radial, then copy the gradient.
Air Fryer Converter
Convert any conventional oven recipe to air fryer settings. Lower the temperature by 25 F and cut the cook time by about 20 percent automatically.
Baker's Percentage Calculator
Turn a bread formula into grams with baker's percentages. Flour is 100 percent, enter water, salt and yeast percents to get weights and hydration.
Baking Pan Converter
Swap one baking pan for another and scale the batter to fit. Compares pan areas for round, square and rectangular pans and gives a batter scale factor.
Binary to Decimal
Convert binary to decimal online. Paste any binary number, with or without spaces, and get the exact base-10 value instantly. Runs in your browser.