Convert CSS units against pixels
Set a pixel value, base font size and viewport. See rem, em, %, vw, vh, pt, pc, in, cm and mm — all from one input.
How CSS units relate
1 inch = 96 px (CSS). 1 pt = 1.333 px. 1 rem = base font. 1 vw = 1% of viewport width. Use the right unit per context: rem for scale, vw/vh for layout, px for borders.
- 01
Pick pixel value
The starting size in CSS pixels.
Parsing is strict-but-tolerant — comments and trailing commas are accepted on input where the source format historically permits them; output stays canonical.
pxstricttolerantliveparsein · sourcepx · live16 px
loaded · parsedtarget · ready - 02
Adjust context
Base font for rem/em. Viewport for vw/vh.
Conversion preserves type information where the target supports it (numbers stay numeric, booleans stay boolean) so the destination parser never has to re-coerce.
ctxtype-preservinglosslesslivememoisedbase · options16 · livebase = 16px
options applied · liveround-trip - 03
Read all units
Every CSS length unit derived from your px input.
Re-encoding is idempotent: running output back through the same converter produces the same bytes, which keeps round-trips git-friendly.
unitsidempotentround-tripdiff-cleandeterministicout · convertedunits · ready1rem · 12pt
converted · livediff-clean - 04
Copy what you need
Click any tile to copy that value.
Copy writes via
navigator.clipboard.writeText; downloads use the target’s native MIME so editors apply the right syntax highlighting on open.copyclipboardtarget MIMEblobclient-side✓ · copiedready · done1rem
shipped · ready to shipsuccess
Converting between formats, safely
Pick the strictest source format
Lossy formats hide bugs. Choose JSON or YAML as your source-of-truth, convert downstream as needed.
Round-trip in CI
If your converter is idempotent, your CI can verify A → B → A equals the original. Catches subtle data loss.
Numbers vs strings differ
YAML/TOML have a number type; CSV doesn’t. Quote IDs in CSV to keep leading-zero values intact.
Watch character encoding
Source format may be Latin-1 / Windows-1252; target should be UTF-8. Convert encoding before structure.
Preserve comments where you can
YAML and TOML support comments. Don’t silently drop them — they often encode intent.
Schema-aware beats blind
Use a schema to guide conversion. Field types, required-ness, and defaults survive better with structure.
When to convert CSS units
Design tokens, responsive, print.
Design tokens
Pick rem instead of px to scale with users' base font. Type information survives: numbers stay numeric, booleans stay boolean, strings stay strings. The destination parser doesn't have to re-coerce, which avoids the "'true' becomes "true"" bug class.
round-trip safeResponsive design
Translate a hard-coded px hero into vw for fluid layouts. Run output back through the inverse converter to verify idempotent round-trips in CI. A → B → A should produce byte-identical input — if it doesn't, you've found data loss.
type-preservingPrint stylesheets
pt and mm for print-only CSS. Comments and metadata survive where the target format supports them (YAML, TOML, HCL). The tool doesn't silently drop intent-encoded annotations, which keeps your config self-documenting.
schema-awareCode reviews
Sanity-check that 24px is 1.5rem in your design system. Pair with a schema (JSON Schema, OpenAPI, Zod, Pydantic) to catch shape drift on either side. Catch breaking changes at conversion time rather than at runtime in production.
losslessDocumentation
Show equivalent values across units in design docs. Output respects target-format conventions: quoting in CSV, indent in YAML, brackets in JSON. Existing parsers don't need patches, and the result drops into legacy pipelines unchanged.
diff-cleanCross-platform
Match iOS pt with CSS pt for consistent typography. Encoding-aware: handles UTF-8 vs UTF-16 vs Latin-1 / Windows-1252 transparently. The character-set surprise that breaks "works on my machine" doesn't apply here.
spec-gradeFrequently asked questions
Something missing?
Tell us what you need. We ship the top requests every two weeks.