WebToolsPlanet
css Tools

CSS Unit Converter

Convert between PX, REM, EM, VW, VH, and % CSS units — with configurable base font size and live conversion.

Last updated: March 25, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is CSS Unit Converter?

CSS has many unit types, each suited to different layout and typography scenarios. Absolute units like px (pixels) are fixed regardless of context. Relative units like rem and em scale based on font sizes — rem relative to the root (html) element, em relative to the nearest ancestor with an explicit font size. Viewport units (vw, vh, vmin, vmax) scale relative to the browser window dimensions. Choosing the right unit type directly impacts your site's accessibility (users who change their browser font size preference), responsive behaviour, and layout stability.

The most common conversion developers need is px ↔ rem for typography and spacing. When a designer hands over a spec in pixels (font-size: 32px) and your codebase uses rem-based spacing (to respect user font preferences), you need to divide by the base font size: 32px ÷ 16px = 2rem. This tool automates all such conversions simultaneously, updating all unit equivalents in real time as you type, with a configurable base font size for designs that use a non-standard root (like 10px for 1rem = 10px convenience).

How to Use CSS Unit Converter

1

Set the base font size at the top (default is 16px — the browser standard)

2

Type a value in any unit field (PX, REM, EM, %, VW, VH)

3

All other unit fields update in real time showing the converted equivalents

4

Click any output field to copy the value to your clipboard

5

Change the base font size to recalculate all values instantly for your specific root element size

Common Use Cases

  • Converting a pixel-based design spec to REM units for accessible, scalable typography
  • Verifying that a spacing value (16px) stays consistent when converted to rem (1rem at base 16px)
  • Calculating the viewport-width equivalent of a fixed pixel width for fluid typography
  • Converting a legacy EM-based component to REM to avoid compounding EM inheritance issues
  • Checking how a component size in pixels relates to viewport width on a 1440px wide design
  • Designing spacing scales (8px, 16px, 24px, 32px) and showing their rem equivalents for CSS custom properties
  • Converting a designer's 10px base font size to the rem values the browser will render at 16px
  • Teaching CSS unit types by showing the mathematical relationships between all unit types simultaneously

Example Input and Output

Converting font and spacing values from a pixel design spec into different CSS units:

Pixel values from a design handoff
Base font size: 16px
Input values to convert: 14px, 16px, 24px, 32px, 48px
Conversions at 16px base font size
14px → 0.875rem | 0.875em | 1.458vw (at 960px viewport)
16px → 1rem     | 1em     | 1.667vw (at 960px viewport)
24px → 1.5rem   | 1.5em   | 2.500vw (at 960px viewport)
32px → 2rem     | 2em     | 3.333vw (at 960px viewport)
48px → 3rem     | 3em     | 5.000vw (at 960px viewport)

Client-Side Processing

All unit conversions run locally via JavaScript arithmetic. No values are sent to our servers.

Browser Font Size Default

Never assume users' default font size is exactly 16px. About 3% of users change their browser's base font size. Always test your layout with the browser font size preference changed to "Large" or "Very Large" in settings to verify that your REM-based spacing and typography scale gracefully.

Avoid EM for Spacing

Avoid using EM for padding and margin on containers, as the compounding effect becomes extremely difficult to debug. If you set margin: 1em on a button inside an article with font-size: 1.2em inside a section with font-size: 1.1em, the actual margin is 1em × 1.2 × 1.1 = 1.32em of the root. Use REM or use px for spacing to keep layouts predictable.

Frequently Asked Questions

What is the difference between REM and EM?
REM (Root EM) units are always relative to the font size of the root (html) element — typically 16px in all browsers. EM units are relative to the computed font size of the element's closest ancestor element with an explicit font size. In practice, EM can compound (a button inside a paragraph inside a section all at 0.875em ends up at 0.875³ ≈ 0.67em of the root size). REM avoids this compounding, making it far easier to reason about. Use REM for typography and spacing; use EM only for properties that should intentionally scale with the component's own font size (like padding on a button that scales relative to the button text).
Why should I use REM instead of PX?
Users can change their browser's default font size (Settings → Fonts → Font Size) to improve readability, especially users with low vision. If your CSS uses px exclusively, their preference is completely overridden. PX sizing is an accessibility barrier. REM units respect user preferences and scale accordingly. WCAG 2.1 Success Criterion 1.4.4 (Level AA) requires text to be resizable to 200% without JavaScript — using rem-based typography satisfies this requirement.
What is the root font size and how do I change it?
The root font size is the font-size set on the html element. Most browsers default this to 16px. To change it: html { font-size: 18px; } — this makes 1rem = 18px everywhere. A common pattern for easy calculation: html { font-size: 62.5%; } makes the root 10px (16px × 62.5% = 10px), so 1rem = 10px, 1.4rem = 14px. However, this overrides the user's browser font size preference, which is an accessibility concern — prefer leaving the root at 100% and dividing by 16.
What are VW and VH units?
1vw = 1% of the viewport width. 1vh = 1% of the viewport height. Useful for fluid layouts that scale proportionally with the browser window. Fluid typography example: font-size: clamp(1rem, 2.5vw, 2rem) creates text that is at minimum 16px, scales with the viewport, and caps at 32px. The CSS clamp() function combined with VW units is the modern way to create responsive typography without media queries.
What does "EM for font size, REM for spacing" mean?
This is a common professional convention: use REM for spacing properties (margin, padding, gap, border-radius) so they stay consistent and don't compound. Use EM for internal component sizing that should scale with the component's font size — for example, an icon inside a button defined in EM will grow automatically if the button's font-size is increased, maintaining proportions.
What is the clamp() function and how does it relate to these units?
CSS clamp(min, preferred, max) clamps a value between a minimum and maximum. Combined with viewport units, it creates fluid type: font-size: clamp(1rem, 2.5vw, 1.5rem). This sets the minimum at 1rem (16px), the preferred as 2.5% of viewport width, and the maximum at 1.5rem (24px). On small screens it scales up from 16px; on large screens it caps at 24px — all without media queries.

How This Tool Works

The conversion logic is pure arithmetic. The tool reads the base font size input and uses it as the denominator for REM and EM calculations. A configured viewport width (default 1440px) is used for VW/VH calculations. When a value is typed into any unit field, the equivalent value in all other units is computed: px ÷ baseFontSize = rem, px ÷ viewportWidth × 100 = vw, etc. All computed values are displayed synchronously in their respective input fields.

Technical Stack

Browser-native JavaScriptPure arithmetic conversionConfigurable viewport referenceClient-side only

Related Tools

Box Shadow Generator
Create CSS box shadows with a visual editor.
CSS Gradient Generator
Create beautiful CSS gradients with a visual editor.
Border Radius Generator
Create complex CSS border-radius shapes with independent corner controls — from rounded buttons to organic blobs.
Flexbox Generator
Build CSS Flexbox layouts visually — configure every container and item property and get ready-to-use CSS.
CSS Grid Generator
Build CSS Grid layouts visually — configure columns, rows, gaps, and named areas and copy production-ready CSS.
CSS Minifier
Compress and minify CSS code to reduce file size and speed up page loads.