CSS Unit Converter

Convert between px, rem, em, %, pt, vw, and vh with a customizable base font size.

Last updated: September 2026

Processed on your device — never uploaded

Base Font Size (px)

Viewport Width (px)

Viewport Height (px)

Input

Results

Pixels (px)

16px

Root Em (rem)

1rem

Em (em)

1em

Points (pt)

12pt

Percent (%)

100%

Viewport Width (vw)

0.8333vw

Viewport Height (vh)

1.4815vh

CSS clamp() Calculator

Generate responsive values that scale between a minimum and maximum, using a preferred fluid value.

Min Value

Preferred Value

Max Value

clamp(16px, 4vw, 24px)

Common Values Reference (base: 16px)

px	rem	em	pt	%
8px	0.5rem	0.5em	6pt	50%
10px	0.625rem	0.625em	7.5pt	62.5%
12px	0.75rem	0.75em	9pt	75%
14px	0.875rem	0.875em	10.5pt	87.5%
16px	1rem	1em	12pt	100%
18px	1.125rem	1.125em	13.5pt	112.5%
20px	1.25rem	1.25em	15pt	125%
24px	1.5rem	1.5em	18pt	150%
28px	1.75rem	1.75em	21pt	175%
32px	2rem	2em	24pt	200%
36px	2.25rem	2.25em	27pt	225%
40px	2.5rem	2.5em	30pt	250%
48px	3rem	3em	36pt	300%
56px	3.5rem	3.5em	42pt	350%
64px	4rem	4em	48pt	400%
72px	4.5rem	4.5em	54pt	450%
80px	5rem	5em	60pt	500%
96px	6rem	6em	72pt	600%

Need a visual CSS editor?Try Webflow

What is This Tool?

CSS Unit Converter is a free browser-based tool that lets you convert between CSS units including px, rem, em, %, vw, vh, pt, and cm with a configurable base font size. It processes everything locally in your browser using JavaScript, so your data never leaves your device. No sign-up, no installation, and no server uploads required — just open the tool and start using it immediately.

How to Use This Tool

Use the visual controls (sliders, color pickers, toggles) to design your effect.
See the live preview update in real time as you adjust settings.
Review the generated CSS code in the code panel below.
Click Copy CSS to paste the code directly into your stylesheet.

When to Use This Tool

This tool is particularly useful when converting pixel designs to responsive units, switching between relative and absolute CSS units. Since it runs entirely in your browser, it works offline after the page loads and keeps your data completely private. Whether you are a developer, designer, student, or professional, this web development tool saves time and eliminates the need for desktop software installation.

Tips and Best Practices

Copy the generated CSS directly into your project stylesheet — it is production-ready.
Test the effect in multiple browsers since some CSS properties have varying support.
Combine multiple generators (e.g., gradient + box-shadow) for layered visual effects.
Use CSS custom properties (variables) to make generated values easy to update later.
All code generation happens in your browser — no external dependencies required.

Frequently Asked Questions

What is the difference between px and rem in CSS?

px is an absolute unit fixed at 1/96th of an inch, while rem is relative to the root element's font size (typically 16px by default), making rem better for responsive designs.

How do I convert px to rem?

Divide the pixel value by the root font size. With the default 16px base, 24px equals 1.5rem (24 / 16 = 1.5).

What is the difference between em and rem?

em is relative to the font size of its parent element and can compound, while rem is always relative to the root element font size, making rem more predictable.

When should I use vw and vh units?

Use vw (viewport width) and vh (viewport height) for elements that should scale with the browser window size, such as full-screen hero sections or responsive typography.

Color Picker Color Palette Generator Code to Image Tailwind Color Picker

Get Tool Tips & Updates

Weekly tips, new tools, and productivity hacks. No spam.

rem

8px

0.5rem

0.5em

6pt

50%

10px

0.625rem

0.625em

7.5pt

62.5%

12px

0.75rem

0.75em

9pt

75%

14px

0.875rem

0.875em

10.5pt

87.5%

16px

1rem

1em

12pt

100%

18px

1.125rem

1.125em

13.5pt

112.5%

20px

1.25rem

1.25em

15pt

125%

24px

1.5rem

1.5em

18pt

150%

28px

1.75rem

1.75em

21pt

175%

32px

2rem

2em

24pt

200%

36px

2.25rem

2.25em

27pt

225%

40px

2.5rem

2.5em

30pt

250%

48px

3rem

3em

36pt

300%

56px

3.5rem

3.5em

42pt

350%

64px

4rem

4em

48pt

400%

72px

4.5rem

4.5em

54pt

450%

80px

5rem

5em

60pt

500%

96px

6rem

6em

72pt

600%

What is This Tool?

When to Use This Tool

Tips and Best Practices

Copy the generated CSS directly into your project stylesheet — it is production-ready.

Test the effect in multiple browsers since some CSS properties have varying support.

Combine multiple generators (e.g., gradient + box-shadow) for layered visual effects.

Use CSS custom properties (variables) to make generated values easy to update later.

All code generation happens in your browser — no external dependencies required.

Frequently Asked Questions

What is the difference between px and rem in CSS?

px is an absolute unit fixed at 1/96th of an inch, while rem is relative to the root element's font size (typically 16px by default), making rem better for responsive designs.

How do I convert px to rem?

Divide the pixel value by the root font size. With the default 16px base, 24px equals 1.5rem (24 / 16 = 1.5).

What is the difference between em and rem?

em is relative to the font size of its parent element and can compound, while rem is always relative to the root element font size, making rem more predictable.

When should I use vw and vh units?

Use vw (viewport width) and vh (viewport height) for elements that should scale with the browser window size, such as full-screen hero sections or responsive typography.

CSS Unit Converter

What is This Tool?

How to Use This Tool

When to Use This Tool

Tips and Best Practices

Frequently Asked Questions

Related Tools

You Might Also Like

Get Tool Tips & Updates

Get Tool Tips & Updates

CSS Unit Converter

What is This Tool?

How to Use This Tool

When to Use This Tool

Tips and Best Practices

Frequently Asked Questions

Related Tools

You Might Also Like

Get Tool Tips & Updates