CSS Unit Converter
Convert any CSS length between pixels, rem, em, percent, viewport units and print units, using your own root font size, parent font size and viewport. Or paste a stylesheet and convert every px value to rem in one step, keeping hairline borders in pixels and writing media queries in em so they respond to the user’s font size.
- Runs in your browser
- No sign-up
- Free to use
Convert a value
| Unit | Value | Copy |
|---|
Browsers define 1in = 96px, so physical units (pt, cm, mm) only match real sizes when printing.
Convert all values in a stylesheet
How to use CSS Unit Converter
- Enter a value and its unit.
- Adjust the root size, parent size and viewport if needed.
- Read the value in every other unit.
- Or paste CSS and convert all px or rem values.
CSS Unit Converter features
14 units
px, rem, em, %, vw, vh, vmin, vmax, pt, pc, in, cm, mm and Q.
Your context
Custom root font size, parent font size and viewport.
Whole stylesheets
px → rem, rem → px or px → em in one pass.
Hairlines kept
1px borders stay in pixels if you want.
Media queries
Breakpoints converted to em, the zoom-friendly choice.
Safe
Comments, strings and url() paths are never changed.
When to use CSS Unit Converter
- Turning a pixel-based design into rem for accessible font sizing.
- Checking what 1.5rem is in pixels.
- Converting print sizes in pt to screen units.
- Working out viewport units for full-height sections.
CSS Unit Converter FAQ
Why use rem instead of px?
rem is relative to the root font size, which users can change in their browser settings. Text and spacing in rem grow with that setting; text in px ignores it, which fails people who need larger text.
What is the difference between rem and em?
rem is always relative to the root (html) font size. em is relative to the font size of the element’s parent, so nested em values multiply.
Why are media queries converted to em?
In media queries both rem and em refer to the browser’s default font size, never your CSS. em breakpoints move when users enlarge text, so layouts switch to the narrow version before text overflows.
Why keep 1px borders?
0.0625rem borders can disappear or render unevenly when the root size changes. Hairlines usually look best in pixels.
Are cm and pt real sizes?
Browsers define 1in as 96px, so physical units only match real measurements when printing.
Is anything uploaded?
No. Conversion runs in your browser.
Choosing CSS units
CSS offers many length units, and each has a job. Pixels are fixed reference units, good for borders, shadows and small details. Font-relative units such as rem and em scale with text. Viewport units relate to the size of the browser window, and physical units such as pt and cm are mainly meant for print stylesheets.
The most important choice for accessibility is between px and rem for text and spacing. Many people increase the default font size in their browser instead of zooming. Sizes in rem follow that setting; sizes in px do not. Converting a stylesheet from px to rem keeps your design identical at the default size of 16 pixels while respecting the user’s choice.
The calculator converts through pixels using the context you enter: the root font size for rem, the parent font size for em and percent, and the viewport dimensions for vw, vh, vmin and vmax. Changing the context updates all results instantly.
The stylesheet converter finds numbers followed by the unit, skipping comments, quoted strings and url() paths, so file names such as bg-16px.png stay intact. Zero values become a plain 0, hairline values can stay in pixels, and values inside @media and @container conditions are converted to em using the browser default of 16 pixels.
Be careful with em for anything except media queries and component-local spacing: because em compounds through nested elements, a list inside a list inside a card can end up much larger than intended. rem avoids that.