CSS & Design
Color Palette Generator
Generate beautiful color palettes from base colors or images. Supports 6 harmony types, image color extraction, and multiple export formats
CSS & Design
CSS Unit Converter
A free browser-based CSS unit converter for px, rem, em, pt, %, vw, vh, and ch, with configurable font-size and viewport context so every conversion is accurate.
The CSS Unit Converter is a free, browser-based tool that converts a value between every common CSS length unit at once — px, rem, em, pt, %, vw, vh, and ch. Because several of those units are relative, you set the context first (root font-size, element font-size, and viewport size), then type a value in any unit and instantly see its equivalent in all the others.
Absolute units like px and pt always mean the same thing, but relative units resolve differently depending on where they sit in your document. This converter makes that dependency explicit instead of guessing, so the numbers it gives you match what the browser will actually render.
What Are CSS Units?
CSS length units fall into two groups. Absolute units — mainly px and pt — map to a fixed physical size regardless of context. Relative units — rem, em, %, vw, vh, and ch — resolve against something else, such as a font-size or the viewport, which is what makes responsive, accessible layouts possible.
A rem is relative to the root <html> font-size (16px by default), an em is relative to the current element's font-size, % resolves against a reference value, vw and vh are each 1% of the viewport width and height, and ch is the advance width of the "0" character in the current font. This tool converts everything through pixels as a common base, so it can move cleanly in either direction.
How to Use the CSS Unit Converter
- Set the root font-size (used for
rem) — leave it at 16px unless your stylesheet changes the<html>size. - Set the element font-size (used for
em,%, andch) to match the element you are styling. - Enter your viewport width and height so
vwandvhresolve against the screen you care about. - Type a value and choose its unit; the equivalents in every other unit update live.
- Click the copy icon on any result to grab the ready-to-paste CSS value, or copy the whole px-to-rem reference table.
Why Convert Between CSS Units?
- Accessible typography: converting a px design spec to
remlets text scale with the user's browser font-size setting. - Fluid layouts: translating fixed sizes into
vw/vhmakes elements respond to the screen instead of staying frozen. - Design handoff: mockups often use px or pt, while your codebase may standardize on rem or em — this bridges the two instantly.
- No guesswork: the context inputs mean the relative conversions reflect your real root and element font-sizes, not a hard-coded assumption.
px vs rem vs em: When to Use Which
Use px for things that should never scale, like hairline borders and precise icon sizing. Use rem for most typography and spacing so the whole interface scales consistently from a single root value. Reach for em when you want a value to track the component's own font-size — padding on a button that should grow with its label, for example. If you are testing how a typeface behaves at different sizes, pairing this converter with the Google Fonts Preview Tool makes it easy to see the rendered result behind the numbers.
Note on ch and Viewport Units
The ch unit equals the advance width of the "0" glyph, which varies from font to font; this tool approximates it as half the element font-size, a close estimate for most text but not an exact match for every typeface. Viewport units are exact once you enter a viewport size, and they are the backbone of full-bleed sections and fluid type. When you move on from sizing to building the actual layout, the CSS Grid Generator pairs naturally with these units, and effects like the CSS Box Shadow Generator let you express blur and offset in whichever unit you prefer.
Beyond CSS Units
This converter is deliberately focused on CSS and typography units; if you need everyday physical measurements such as length, weight, or temperature, the general Unit Converter handles those instead. And once your sizes are settled, color work often comes next — the Hex to RGB Converter turns your palette into the exact values your stylesheet needs.
Frequently Asked Questions
How do I convert px to rem?
Divide the pixel value by the root font-size. At the default 16px root, 24px equals 1.5rem. This tool does it automatically the moment you enter a value, and updates every result if you change the root font-size.
What is the difference between rem and em?
A rem is always relative to the root <html> font-size, so it stays consistent everywhere, while an em is relative to the current element's font-size and can compound when nested. Use rem for predictable scaling and em when you want values to track a component's own text size.
How are vw and vh calculated?
1vw is 1% of the viewport width and 1vh is 1% of the viewport height. Enter your target viewport size in the context fields and the converter resolves those percentages into pixels and back for you.
Is the ch conversion exact?
Not exactly. The ch unit is the width of the "0" character in the active font, which differs between typefaces. This tool approximates it as half the element font-size, which is close for most fonts but should be treated as an estimate.
Is this CSS unit converter free and private?
Yes. It is completely free and runs entirely in your browser. Nothing you type is uploaded or stored on a server.
From the same category
Related Tools
CSS & Design
CSS Flexbox Generator
Learn and create flexbox layouts with live visual preview. Supports all flexbox properties, preset layouts, and interactive editing
CSS & Design
CSS Grid Generator
Free visual CSS Grid generator with live preview. Set columns, rows, gaps, and alignment, then copy the generated grid CSS and HTML markup instantly.
CSS & Design
Cubic Bezier Generator
Free cubic-bezier() easing curve generator with draggable control points, live animation preview, presets, and one-click copy for CSS transition and animation timing functions.
CSS & Design
CSS Border Radius Generator
Create perfect rounded corners with live preview. Supports individual corner control, preset shapes, and visual editing
CSS & Design
Color Blindness Simulator
Free color blindness simulator. Upload an image or pick a color and see side-by-side previews for protanopia, deuteranopia, tritanopia, and achromatopsia.
CSS & Design
CSS Animation Generator
Free visual CSS animation generator with live preview. Pick presets or build custom @keyframes, tune duration, timing, iterations, and copy the CSS instantly.
CSS & Design
Color Contrast Checker
Free WCAG color contrast checker. Test foreground and background colors, get the contrast ratio, and see PASS/FAIL for AA and AAA accessibility.
CSS & Design
CSS Gradient Generator
Create beautiful CSS gradients with live preview. Supports linear, radial, and conic gradients with multiple color stops
CSS & Design
HTML Color Picker
Pick and convert colors between HEX, RGB, RGBA, HSL, and HSLA formats. Features interactive canvas, color harmonies, shades, tints, and save functionality
CSS & Design
CSS Clip-path Generator
Free CSS clip-path generator with a live preview. Pick preset shapes or drag vertices to build a custom polygon, circle, ellipse or inset, and copy the CSS.
CSS & Design
CSS Box Shadow Generator
Create professional CSS box shadows with live preview. Supports multiple layers, inset shadows, and preset effects
CSS & Design
Glassmorphism Generator
Free glassmorphism generator with live preview. Adjust blur, transparency, tint, radius, border, and shadow, then copy frosted-glass CSS instantly.
CSS & Design
CSS Text Shadow Generator
Free CSS text-shadow generator. Adjust offset, blur, color and opacity, stack multiple shadows, preview live, apply presets, and copy the CSS instantly.
CSS & Design
CSS Filter Generator
Free CSS filter generator with live preview. Adjust blur, brightness, contrast, grayscale, hue-rotate, sepia and drop-shadow sliders, try presets, and copy the CSS.