VRANA LABS
Back to Toolbox

CSS Unit Converter

Convert between px, rem, em, vw, vh, %, pt, and ch — with configurable base font size and viewport, plus ready-to-use CSS output.

Responsive design lives and dies by units. The CSS Unit Converter eliminates the mental arithmetic of jumping between px, rem, em, viewport units (vw/vh), and more — with configurable context so the numbers actually match your project.

Key Features

  • Bidirectional Conversion: Enter a value in any unit and all others update instantly.
  • Configurable Context: Set your root font size and viewport dimensions to match your design system exactly.
  • All Common Units: px, rem, em, %, vw, vh, pt, and ch — the full set you reach for daily.
  • CSS Snippet Output: Copy a ready-to-use CSS property with the converted value in one click.

[!TIP] Set the Base Font Size to match your project’s html { font-size: ... } for accurate rem and em calculations. The default is 16px.

CSS Unit Converter

100% Client-Side
px
px
px
px
px Pixels
rem Root Em
em Parent Em
% Percentage
vw Viewport Width
vh Viewport Height
pt Points
ch Character Width
font-size: 1rem; /* 16px */
Quick Reference — When to use which unit?
px Borders, shadows, fixed widths. Avoid for text sizing.
rem Typography, spacing — scales with the user's browser preference.
em Component-relative spacing — useful inside reusable components.
% Fluid widths relative to parent container.
vw / vh Full-bleed sections, hero heights, viewport-relative typography.
pt Print stylesheets. 1pt = 1/72 of an inch.
ch Constraining text column widths (e.g. max-width: 65ch).

Privacy Check: All conversions happen locally in your browser using pure math. Nothing is sent to our servers.