01
Choose the reference before converting
Root and parent font sizes are separate: rem uses the former and em uses the latter. vw and vh use the entered viewport width and height, not this tab’s current window.
HTML / CSS / Frontend Code
CSS unit converterFrom fixed sizes to fluid CSS
Enter a CSS length, or switch to clamp, calc or aspect ratio without leaving this page.
CSS unit converter
Input
Your values are calculated in this browser and are not uploaded.
Result
px
24pxrem
1.5remem
1.5emvw
1.6667vwvh
2.6667vhOptions
Calculation ready.
A CSS unit converter helps when a design file says 24px but your stylesheet uses rem or viewport units. A px to rem converter alone cannot tell you what 1em or 2vw means until you specify the parent font and viewport. Set those values here before copying a number.
Use the CSS clamp calculator when you have two viewport and size pairs. The vw vh calculator view also makes each percentage of the viewport concrete. This CSS unit converter keeps the same context when you test a restricted calc() expression, so the numbers can be checked against one another.
Why use this CSS unit converter?
The reference values stay visible instead of hiding behind a default.
Five units, one explicit context
The CSS unit converter shows px, rem, em, vw and vh for the same length. Change the root size and only rem changes; change the parent size and only em changes. The result is a calculation for the context you entered, not a claim about every page.
A fluid rule with checkable endpoints
The clamp mode takes 16px at 375px and 32px at 1440px, then derives the middle vw term. Preview a width such as 768px to see its computed size and whether the value is still fluid or already clamped.
Keep the context next to the value
02
Switch modes without losing a draft
Each mode retains its last input. Automatic calculation waits 350 ms after changes; turn it off to run with Ctrl/Cmd+Enter. A changed input makes the previous output unavailable for copying.
03
Verify the generated CSS
In clamp mode, preview an intermediate width and compare it with both endpoint sizes. In ratio mode, check the reduced width:height pair and the height computed for your target width.
Four related calculations in one workbench
Context-aware unit table
Enter one px, rem, em, vw or vh length and read all five equivalents. A bare number is treated as px, and each result retains its unit.
Fluid clamp generator
Two viewport widths and two sizes determine a straight line. Choose rem or px bounds, and inspect the resulting clamp() expression and preview size.
Bounded calc evaluator
Evaluate arithmetic with px, rem, em, vw and vh into pixels. Lengths may be added or subtracted; multiplication and division need a unitless factor.
Aspect-ratio check
Reduce integer width and height to a ratio, generate aspect-ratio CSS, and derive the height for a chosen target width.
Where the calculation stops
- Relative units need the right base
- rem uses root font size, em uses the supplied parent font size, vw uses viewport width and vh uses viewport height. This tool never reads your target page’s computed styles.
- calc() is a deliberate subset
- This CSS unit converter accepts only listed length units, unitless numbers, parentheses and + − × ÷. It rejects percentages, var(), env(), unknown units and arithmetic with incompatible dimensions instead of guessing.
- Clamp requires ordered anchors
- The start viewport must be smaller than the end viewport, and the minimum size cannot exceed the maximum. Negative sizes and nonfinite values stop generation with an error.
- Ratio mode does not edit images
- Enter positive integer source dimensions and a positive integer target width. The output is a mathematical height and CSS aspect-ratio declaration; it does not crop or resample an image.
CSS unit converter questions
How do I convert px to rem?
Divide pixels by the root font size. At 16px per rem, 24px is 1.5rem; change the root field if your project uses another base.
What is the difference between rem and em?
rem follows the root element; em follows the font size supplied for the local context. Nested components can therefore yield a different em result even when rem stays fixed.
How do I convert pixels to vw or vh?
1vw is 1% of viewport width and 1vh is 1% of viewport height. Enter both dimensions first, then convert through px; a viewport change alters the result.
How do I calculate a CSS clamp value?
Give the minimum and maximum viewport widths and the sizes desired at those widths. The CSS clamp calculator derives a linear vw term and shows a preview at your chosen width.
Can calc() mix rem and viewport units?
Only the supported subset. You can evaluate calc(1rem + 2vw), but percentages, variables and browser-dependent functions have no reliable px value here.
Still have a question?
Use the CSS unit converter now
Return to the workbench to compare a length, test a formula or generate a bounded fluid size.