CSS Unit Converter — px ↔ rem ↔ em
Convert between px / rem / em / pt / % / vw / vh in CSS. Adjustable base font-size and viewport. Perfect for design systems and responsive layouts.
+ Advanced
Equivalent values
CSS Unit Converter — switch between px / rem / em / pt / % / vw / vh. Useful for design systems and responsive layouts.
rem is relative to the <html> root font-size. em is relative to the parent element. Default browser is 16px.
When to use which CSS unit?
- px — fixed pixels. Use for borders, shadows, small icon sizes. Doesn't scale with user zoom.
- rem — relative to
<html>font-size (default 16px). Best for font-size and spacing — scales when users change their default font. - em — relative to the parent's font-size. Good for padding/margin inside buttons or badges — scales with context.
- % — relative to the parent's corresponding value (width/height/font-size). Useful for fluid layouts.
- vw / vh — 1% of viewport width/height. Use for full-screen heroes or responsive font sizes.
- pt — point (1/72 inch). Rarely used on the web — mostly for print and PDF.
Rules of thumb
- 16px = 1rem (browser default). Foundation of every calculation.
- Tailwind uses rem:
p-4=1rem=16pxby default. - Font-size: use rem. Borders & shadows: use px. Hero sections: use vh.
- Avoid em in nested components — scaling can compound unpredictably.
Tips
- Change Base font-size if your page uses
html { font-size: 14px }— the conversion updates instantly. - Click 12px / 16px / 24px preset buttons to quickly check common sizes.
- Click "Copy" on any card to paste straight into CSS.
Who this is for
Frontend devs, UI/UX designers, anyone prototyping visuals fast or generating CSS for Tailwind/React/Vue projects.
FAQ
Does the generated CSS work with Tailwind?
Yes. Output is vanilla CSS, paste into any .css file. For Tailwind projects, use @utilities layer or theme overrides.
Browser compatibility?
Modern CSS syntax (custom properties, grid). Works on Chrome/Firefox/Safari 2020+. IE11 NOT supported.
Related tools
See all tools →Color Picker
Pick HEX/RGB/HSL, RGB sliders, 12 presets, nearest Tailwind name.
NEWTailwind ↔ CSS Converter
Convert between Tailwind utility classes and vanilla CSS. ~200 utilities (spacing, color, flex, grid…). Helps migration.
NEWSVG to React/JSX
Convert SVG to React component. camelCase attrs, currentColor, TypeScript types, size/color props.
NEWCSS Animation Builder
Visual builder for CSS animations. 10 presets (fadeIn, bounce, pulse, spin, shake…). Tweak duration, easing, iteration.