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.
NEWCSS Animation Builder
Visual builder for CSS animations. 10 presets (fadeIn, bounce, pulse, spin, shake…). Tweak duration, easing, iteration.
NEWCSS Filter Builder
Visual builder for CSS filters — blur, brightness, sepia, hue-rotate, drop-shadow. 8 presets (Vintage, Polaroid, Noir…).
NEWColor Palette Generator
Generate harmonious palettes from a base color (HSL theory). 6 schemes: Monochromatic, Analogous, Complementary, Triadic… + 10 shades.