Convert CSS lengths between px, rem, em, pt, %, vw and vh with a live size preview. Set root, parent and viewport context, then copy — private and free.
Runs entirely in your browser — your data never leaves your device.
How to use CSS Units Converter
What it does & when you need it
CSS mixes absolute and relative length units, and moving a value from one to
another means keeping a chain of assumptions straight in your head: how big the
root font is, what the parent element inherited, how wide the viewport is. This
converter does that arithmetic for you. Type a number, pick the unit you have and
the unit you want, and it shows the result instantly with a small bar sized to
the outcome so you can sanity-check it by eye. Everything runs in your browser —
nothing you type is uploaded.
Reach for it when a design spec is in points but your stylesheet is in rem, when
you are talked into "just use rem everywhere" and need to translate a pile of
pixel values, or when you want to see what 10vw actually resolves to on a given
screen width.
How to use
Enter the Value and choose the From and To units.
Adjust the context fields if your page differs from the defaults: root font
size (used by rem), parent font size (used by em and %), and viewport
width (used by vw and vh).
Read the result, or copy it with the button or Ctrl/Cmd + Enter.
Things worth knowing
rem and em resolve differently.rem is always relative to the root element's
font size (16px by default), while em is relative to the current element's
font size, which is why nested em values compound. This tool treats the parent
font size as the em and % reference so you can model a specific element.
A point is not a pixel. CSS defines 1pt as 1/72 inch and assumes 96px per
inch, so 1pt equals exactly 1.333px and 12pt equals 16px. That fixed ratio is why
print-derived specs translate cleanly. For fluid sizing between two breakpoints,
pair this with the CSS clamp generator.
Examples
Pixels to rem
16px -> rem
The everyday case: 16px resolves to 1rem against the default root font size.
Points to pixels
12pt -> px
A print-derived point value converts cleanly to 16px using the fixed 96dpi ratio.
rem back to pixels
1.5rem -> px
Turns a rem heading size into 24px to compare against a fixed-pixel mock-up.
Frequently asked questions
How many pixels is 1rem?+
By default 1rem equals 16px, because rem is relative to the root element font size and 16px is the browser default. If your CSS sets a different root size, change the root value in this tool and the conversion updates — for example with a 20px root, 1rem becomes 20px and 24px becomes 1.2rem.
What is the difference between rem and em here?+
rem is always measured against the root font size, while em is measured against the parent element font size, so nested em values compound. This converter uses the root field for rem and the parent field for em and %, letting you model a specific element rather than assuming both are 16px.
How does it convert points to pixels?+
CSS defines 1pt as 1/72 of an inch and assumes 96 pixels per inch, so 1pt is exactly 1.333px and 12pt is 16px. That fixed ratio means print specifications given in points translate to the web cleanly, without depending on any font size or viewport.
What do vw and vh depend on?+
1vw is one percent of the viewport width and 1vh is one percent of the viewport height. Because those depend on the screen, this tool asks for a viewport size so it can resolve them — at a 1280px viewport, 10vw is 128px.
Is my input sent to a server?+
No. Every conversion runs locally in your browser with plain arithmetic and no network request, so it works offline and nothing you type ever leaves your machine.