CSS Unit Converter
Convert between CSS units - px, rem, em, pt, vw, vh, and more.
Used for rem/em/% calculations
• px: Absolute pixels
• rem: Relative to root font size (html element)
• em: Relative to parent font size
• pt: Points (1pt = 1/72 inch)
• vw/vh: Viewport width/height percentage
Convert between all CSS units including pixels, rem, em, points, viewport units, and percentages. Configure base font size and viewport dimensions for accurate conversions.
Converting between CSS units is rarely a single multiplication because most units are relative to something. This converter makes the context explicit: you set the base font size (default 16px) used for rem, em, and percentage math, and the viewport dimensions (default 1920 by 1080) used for vw and vh, then every conversion updates live as you type. Enter a value in any of seven units (px, rem, em, pt, %, vw, vh) and a grid shows the equivalent in all of them at once, with the source unit highlighted.
The math follows the CSS specification. Points convert at the defined ratio of 1pt = 1/72 inch against the 96px-per-inch reference, so 12pt equals 16px exactly. One vw is 1 percent of the configured viewport width, and percentage is calculated against the base font size, matching how the font-size property resolves it. Preset buttons switch the viewport to common targets: desktop 1920 by 1080, laptop 1366 by 768, and mobile 375 by 812 (the iPhone X class of screens).
Click any result card to copy the value with its unit suffix, formatted sensibly: px and pt round to whole numbers while relative units keep up to four decimals with trailing zeros stripped. Quick-value chips for common sizes from 8px to 64px speed up typographic scales, and your base font size, viewport settings, and source unit are saved between visits.
- 1
Enter a value and unit
Type a number and pick its unit from px, rem, em, pt, %, vw, or vh. All seven conversions recalculate instantly.
- 2
Set your context
Adjust the base font size for rem and em math and the viewport size for vw and vh, or use the desktop, laptop, and mobile presets.
- 3
Copy a result
Click any card in the conversion grid to copy the formatted value with its unit suffix, like 1.5rem, straight to your clipboard.
px-to-rem migration
Convert hardcoded pixel sizes from a legacy stylesheet to rem values so the layout scales with the user's font preference.
Implementing design specs
Translate point or pixel sizes from a print-oriented brand guide into the rem and em values your codebase uses.
Fluid layout math
Find what vw value reproduces a 600px hero width at a 1366px laptop viewport before writing a clamp() rule.
Custom root font sizes
Check what 2.4rem renders as in pixels on a project where the root font size is 10px instead of 16px.
Why do rem and em show the same result?
Both are computed against the configured base font size. In a real page, em resolves against the parent element's font size, which the converter cannot know, so set the base font size to your element's inherited size when converting em.
How are points (pt) converted?
Using the CSS-defined ratio: 1 point is 1/72 of an inch and CSS assumes 96 pixels per inch, so 1pt equals exactly 1.3333px. That makes 12pt the same as 16px.
What is the percentage relative to?
The base font size, matching how percentages resolve for the font-size property. With a 16px base, 150% equals 24px. Percentages of container width or height are a different calculation this tool does not model.
Are my settings saved?
Yes. The base font size, viewport width and height, and your selected source unit persist in your browser's local storage, so the converter reopens configured the way you left it.
Does the converter send anything to a server?
No. Every conversion is plain arithmetic executed on your device as you type, and the persisted settings live only in local storage. The page works offline once loaded.