CSS Unit Converter

How to use

1. Enter a Value — Type the numeric value you want to convert (e.g., 16).
2. Pick the Source Unit — Select the unit your value is currently in.
3. Set Context — Adjust base font-size, viewport width, and viewport height for accurate em, rem, vw, and vh conversions.
4. See All Conversions — View the equivalent value in every CSS unit instantly.

Free CSS Unit Converter

Convert between any CSS length units instantly: px, em, rem, %, vw, vh, vmin, vmax, pt, pc, in, cm, and mm. Set your base font-size and viewport dimensions for accurate relative-unit calculations. Everything runs locally in your browser.

Supported CSS Units

• Absolute units: px, pt (points), pc (picas), in (inches), cm, mm
• Font-relative units: em (parent font-size), rem (root font-size), % (percentage of parent)
• Viewport units: vw (viewport width %), vh (viewport height %), vmin, vmax

When to Use Each Unit

• px: Best for fixed UI elements like borders, shadows, and precise layouts.
• rem: Ideal for accessible typography and spacing. Scales with the user's root font-size preference.
• em: Useful for component-scoped spacing where you want padding/margin to scale with the element's own font-size.
• vw/vh: Perfect for full-viewport layouts, hero sections, and responsive containers.
• pt/pc/in/cm/mm: Primarily used for print stylesheets and physical media.

Accessibility Note

Using rem for font sizes respects the user's browser preference. If a user sets their base font-size to 20px for readability, rem-based text scales automatically. Pixel-based text does not, which can create accessibility barriers.

Privacy

All unit conversion is performed locally using JavaScript math. No data is transmitted.

Related: Pixel to REM Converter, CSS Clamp Generator, Aspect Ratio Calculator.

Frequently asked questions

What is the base font-size for?

em and rem units are relative to the font size. By default, browsers use 16px as the root font size. If your design system uses a different base (e.g., 10px for easy rem math), adjust this setting.

How does vw/vh conversion work?

1vw equals 1% of the viewport width, and 1vh equals 1% of the viewport height. The converter uses the viewport dimensions you provide to compute exact pixel equivalents.

What about vmin and vmax?

1vmin equals 1% of the smaller viewport dimension; 1vmax equals 1% of the larger dimension. These are useful for responsive designs that need to adapt to both portrait and landscape orientations.

Can I convert from any unit to any other?

Yes. The tool converts your input to pixels internally, then to every other supported unit. You can read any pair of units from the results table.

Is this data stored?

No. All conversions happen in your browser. No data leaves your device.

Related free tools

• Text Shadow Generator — Design CSS text shadows with a visual editor and live preview.
• Placeholder Image Generator — Generate placeholder images with custom size, color, and text.
• Color Palette Generator — Generate harmonious color palettes from any base color.
• Color Contrast Checker — Check WCAG 2.1 contrast ratio with AA / AAA pass marks for normal text, large text, and UI components.
• CSS Clamp Generator — Build fluid clamp() expressions for responsive typography and spacing — no media queries needed.
• Pixel to REM Converter — Live two-way px ↔ rem conversion with custom root font-size. Built for accessible, user-respecting design.
• Color Blindness Simulator — Preview images and UI through protanopia, deuteranopia, tritanopia, and achromatopsia simulations.
• CSS Triangle Generator — Generate pure-CSS triangles for tooltips, arrows, and speech bubbles. 8 directions, any size or color.
• CSS Cubic Bezier Generator — Design custom easing curves visually with live curve and animation preview. Production-ready CSS.
• CSS Glassmorphism Generator — Design frosted-glass UI panels with backdrop blur, opacity, saturation, and tint. Live preview.
• CMYK Color Converter — Convert HEX and RGB to CMYK percentages for print. Two-way conversion with live preview.
• Neumorphism Generator — Design soft, extruded UI elements with adjustable shadow depth, blur, and shape style.