CSS Unit Converter - px to rem, em, vw, vh & % Online
Convert between CSS units (px, rem, em, %, vw, vh) with configurable base font size and viewport dimensions — free online CSS unit converter.
Frequently Asked Questions
What is a CSS unit converter?
A CSS unit converter is a tool that translates values between different CSS length units such as pixels (px), root em (rem), em, percentage (%), viewport width (vw), and viewport height (vh). Since these units represent different measurement systems — some absolute, some relative — a converter helps developers quickly find equivalent values without manual calculation.
How do I use this CSS unit converter?
Enter a numeric value in the input field, select your source unit (e.g., px), and all equivalent values in other units (rem, em, %, vw, vh) are displayed instantly. You can adjust the base font size and viewport dimensions in the settings panel to match your project configuration. Click the copy button next to any output to copy the CSS-ready value to your clipboard.
What is the difference between rem and em?
Both rem and em are relative CSS units based on font size, but they reference different elements. rem is always relative to the root element's font size (usually the <html> element, defaulting to 16px in most browsers). em is relative to the font size of the element's parent. This means rem produces consistent sizing across the entire page, while em compounds when elements are nested.
Why should I use rem instead of px?
Using rem instead of px improves accessibility and responsiveness. When users change their browser's default font size (for readability or accessibility needs), rem-based layouts scale proportionally while px-based layouts remain fixed. This makes your site more accessible to users with visual impairments and more adaptable across different devices and user preferences.
How does the base font size affect conversions?
The base font size (default: 16px in most browsers) determines the relationship between px and rem/em. For example, at 16px base: 1rem = 16px, 0.875rem = 14px, 1.5rem = 24px. If your project sets a different root font size (e.g., html { font-size: 14px; }), you should update the base font size setting in this tool to get accurate conversions for your project.
What are viewport units (vw and vh)?
Viewport units are relative to the browser window dimensions. 1vw equals 1% of the viewport width, and 1vh equals 1% of the viewport height. For example, on a 1920px-wide screen, 50vw equals 960px. They are commonly used for responsive full-width or full-height layouts, hero sections, and fluid typography.
How do percentage (%) units work in CSS?
Percentage units in CSS are relative to the parent element's corresponding dimension. For width-related properties, % is relative to the parent's width. For font-size, % is relative to the parent's font size. This tool converts % based on the configured parent element width, which you can adjust in the settings to match your layout context.
Is my data secure when using this tool?
Yes. This CSS unit converter runs entirely in your browser using client-side JavaScript. No input values or conversion results are sent to any server. Your data stays on your device at all times.
Code Examples
// CSS Unit Conversion Functions
function toPx(value, unit, ctx = {}) {
const { baseFontSize = 16, parentFontSize = 16,
viewportWidth = 1920, viewportHeight = 1080, parentWidth = 1920 } = ctx;
switch (unit) {
case 'px': return value;
case 'rem': return value * baseFontSize;
case 'em': return value * parentFontSize;
case '%': return (value / 100) * parentWidth;
case 'vw': return (value / 100) * viewportWidth;
case 'vh': return (value / 100) * viewportHeight;
}
}
function fromPx(px, unit, ctx = {}) {
const { baseFontSize = 16, parentFontSize = 16,
viewportWidth = 1920, viewportHeight = 1080, parentWidth = 1920 } = ctx;
switch (unit) {
case 'px': return px;
case 'rem': return px / baseFontSize;
case 'em': return px / parentFontSize;
case '%': return (px / parentWidth) * 100;
case 'vw': return (px / viewportWidth) * 100;
case 'vh': return (px / viewportHeight) * 100;
}
}
function convert(value, from, to, ctx) {
return fromPx(toPx(value, from, ctx), to, ctx);
}
// Usage
const ctx = { baseFontSize: 16, viewportWidth: 1440 };
console.log(convert(24, 'px', 'rem', ctx)); // 1.5
console.log(convert(2, 'rem', 'px', ctx)); // 32
console.log(convert(50, 'vw', 'px', ctx)); // 720