CSS Unit Converter
Convert type, borders, radius, spacing, layout sizes, and shadows into copy-ready CSS values.
Base inputs
Compare CSS length units with a root font size and viewport size in the same panel.
Used for rem, em, and %. Browser defaults are usually 16px.
Result panel
Check base values, relative units, viewport units, and absolute units in one place.
font-size: 0rem;Property templates
Each card can use its own size and unit. Leave a field blank to reuse the main converted value.
font-size: 0rem;line-height: 0;border-width: 0px;border-radius: 0rem;padding: 0rem;width: clamp(0rem, 0vw, 0rem);inset: 0rem;box-shadow: 0 0 0 currentColor;Preview
Compare text, borders, radius, spacing, and gap before you paste the CSS.
Base text
Enter a value to preview
CSS unit conversion guide
A CSS number only works when the base is clear
This converter turns one input into px first, then compares rem, em, %, vw, vh, vmin, vmax, and absolute CSS units in the same view. It also prepares declarations for font-size, line-height, border-width, radius, padding, gap, width, and box-shadow, so you can check the base before pasting code into a stylesheet.
Start with the base font size and current unit
The tool updates live. When you change the base font size, value, unit, viewport size, or CSS property, the result cards, property templates, and preview update without a separate calculate button.
- Set the base font size to the root size used by your project. 16px matches many browser defaults, but design systems based on 10px or 14px need that value first.
- Enter the value and current unit. You can start from px, rem, em, %, vw, vh, vmin, vmax, in, cm, mm, pt, or pc.
- Match the viewport width and height to the screen you are checking. vw, vh, vmin, and vmax all change when those numbers change.
- Choose the CSS property and read the result panel or property templates. Use Copy CSS or a card-level copy button when the declaration is ready.
rem, em, %, vw, and vh answer different questions
The same 24px value can scale later in different ways. Use rem when the size should follow the root font scale, em when it should follow a component context, and viewport units when the browser window itself is the base.
px
The working base value. The tool converts every input to px first, then divides that number back into other units.
rem · em · %
Calculated from the base font size entered in the tool. In real CSS, rem follows the root size, em follows the local context, and % depends on the property.
vw · vh · vmin · vmax
Calculated from the viewport width and height. Recheck these values for mobile, desktop, and orientation changes.
Absolute and approximate units
in, cm, mm, pt, and pc follow CSS absolute length relationships. ch≈ and ex≈ are quick estimates because real fonts vary.
The calculation runs through px first
Any input unit is converted into px, then divided by the base font size, viewport size, or CSS absolute length relationship. If the base font size or viewport is wrong, the rem, %, vw, and vh readings will be wrong too.
A 24px example reads as font-size: 1.5rem
With a 16px base font size, entering 24px gives 24px, 1.5rem, 1.5em, and 150%. On a 1366×900 viewport, the same value is also about 1.757vw and 2.6667vh.
Treat the preview as a quick check
The preview clamps very small and very large visual sizes so the panel stays readable. After copying the CSS, test it with the actual font, parent element, and responsive breakpoint.
Check the base once more before you paste
Unit conversion gives you a number, but the final layout still depends on parent elements, fonts, viewport size, and the relative behavior of the property you use.
- em can compound. A button inside a card may become harder to predict if parent font sizes change.
- % depends on the property. 150% for font-size and 150% for width do not reference the same thing.
- vw and vh feel different on mobile. Browser UI and orientation can change the usable viewport.
- Absolute units are CSS relationships, not a physical ruler. Print or physical measurement needs a separate check.
Frequently asked questions
Can I leave the base font size at 16px?
Yes, if the project follows the browser default root size. If your html font size is set to 10px or 14px, change the tool base first so rem and % results match the project.
Why do rem and em show the same number here?
The tool uses the entered base font size for both results so you can compare them side by side. In actual CSS, rem follows the root font size, while em follows the current element or parent context.
Should I recalculate vw and vh after resizing the screen?
Yes. vw uses viewport width and vh uses viewport height, so the perceived size changes between mobile, desktop, and orientation states.
Why are ch≈ and ex≈ marked as approximate?
ch and ex depend on the active font. The tool uses half of the base font size as a quick comparison value, so final typography still needs a check in the real font.