CSS Unit Converter
Batch-convert CSS lengths with separate font, percentage and viewport references; export CSV.
This tool runs entirely in your browser. Your data is never uploaded, never stored, and never leaves your device.
Convert up to 100 CSS lengths across px, rem, em, pt, %, vw and vh using separate font, container and viewport references.
How to use it
- 1Enter lengths with explicit units, one per line.
- 2Set the root font, em reference, percentage basis and viewport sizes.
- 3Convert, review any row errors, then copy or download valid rows as CSV.
What happens to your data
Lengths and reference sizes are processed locally. The tool does not inspect or upload your website; conversions depend on the reference sizes you provide.
Last updated October 2026
Convert px, rem, em, pt, percent and viewport lengths with the right reference for each unit. Paste a single CSS length or a list of up to 100 values, compare all seven units, then copy the results or download the valid rows as CSV. Separate root-font, em-font and percentage references help avoid a common design handoff mistake: treating every relative unit as if it meant the same thing.
For example, 24px is 1.5rem when the root font is 16px, but it is 1.2em when the relevant element font is 20px. If a percentage refers to a 320px container, the same 24px is 7.5%. Those are different relationships, not conflicting answers. Set the reference sizes to match the actual page before transferring converted values into a stylesheet.
How it works
Each input is converted to CSS pixels, then divided by the scale of the destination unit. One rem uses the root element font size. One em usually uses the current element font size, but em in font-size refers to the parent font size. A percentage is property-dependent: supply its actual basis, such as a containing block width for a width calculation. This tool does not infer the property or inspect your site.
The absolute-unit relationship is 1 inch = 96 CSS pixels = 72 points, so 72pt converts to 96px. CSS pixels are not necessarily physical screen pixels. A vw is one percent of the viewport width; a vh is one percent of its height. Enter the viewport dimensions you intend to model. Mobile browser chrome, dynamic viewport units such as dvh, container units and browser zoom can require additional layout context not captured by this calculator.
Numbers can be positive, zero or negative, with a maximum magnitude of one billion. Reference sizes must be between 0.000001 and one million CSS pixels. Scientific notation is accepted; calc(), var(), unitless values and unsupported units receive row-specific errors. Results are approximate, displayed to 12 significant digits. Negative numbers are only usable where the CSS property permits them. CSV downloads exclude invalid rows; review the error messages instead of assuming the entire list succeeded.
Worked example: different references, one physical CSS length
- Input
- 24px; root font 16px; em reference 20px; percent reference 320px
- Result
- 1.5rem = 1.2em = 18pt = 7.5%
These outputs share the same 24 CSS pixels only under the supplied references.
Common use cases
- Translating design spacing from px to rem
- Comparing nested em sizes with the root font
- Checking a percentage width against a known container
- Exporting multiple CSS lengths for a design review
Frequently asked questions
Why can rem and em give different results?＋
rem is based on the root font size. em uses the relevant element font size, or the parent font when setting font-size. Enter those reference sizes separately; they do not have to be equal.
Is 100% always equal to 1em?＋
No. Percentages depend on the property. A width percentage usually refers to a containing block width, not a font. Enter the relevant percentage basis rather than assuming that every percent value is a font-size conversion.
Can I convert a list of pixel values?＋
Yes. Paste up to 100 non-empty lines with explicit units, such as 8px, 16px and 24px. Review each row and download the valid conversions as CSV. Invalid rows are not included in that download.
Does converting pixels to rem automatically improve accessibility?＋
No. Relative units can support flexible layouts, but accessibility also depends on zoom, text scaling, layout, contrast and interaction design. Test the actual page with enlarged text and browser zoom.
Standards and limitations
Related tools
CSS Minifier
Minify CSS while preserving strings, cascade order, custom properties and license notices.
Color Converter & Picker
Convert HEX, RGB and HSL colors with alpha, preview transparency and copy complete CSS values.
Color Contrast Checker
Audit layered text, UI controls and palettes against WCAG 2.2, then apply a safer accessible shade.
Code Formatter
Format JavaScript, TypeScript, JSON, HTML or CSS with parser-aware indentation and downloads.