UUUP Tools

Design Tools

CSS Unit Converter — px, rem, em, vw

Convert among px, rem, em, pt, vw, vh, and %. Customize root font size, parent font size, and viewport size for responsive work and design-to-code handoff.

Quick switch→CSS Clamp Generator
CSSUnitsConversion
Quick switch:CSS Clamp GeneratorPixel RulerAspect Ratio Calculator

Favorite this tool

No favorite storage mode has been selected.

Quick actions

Back to Design Tools Browse all tools

Copy this tool URL or open the system share sheet on a supported device.

Use cases

  • Convert design-tool px values to rem/em
  • Estimate vw/vh from viewport size
  • Align spacing math to a shared root font-size baseline

How to use

  1. Enter a value and choose the source unit
  2. Set root font size, parent font size, and viewport baselines
  3. Review each unit result and click one to copy it

Example input and output

Input

16px (root font size 16px)

Output

1rem / 1em (when parent font size is also 16px)

FAQ

What is the difference between rem and em?

rem is relative to the root font size; em is relative to the parent font size. This tool uses the root and parent values you enter.

What is % relative to?

Percentages depend on context. Here they are approximated from your baselines; confirm against the real layout before shipping.

Tools

Related tools

Continue with another translated tool for a nearby task.

CSS Clamp Generator

CSS Clamp Generator — Fluid Responsive Sizes

Available

From min/max viewport widths and a target size range, compute a clamp() formula for fluid font sizes, spacing, and other lengths that scale with the viewport.

CSS clamp Responsive
Open tool

Pixel Ruler

Pixel Ruler — Screen Size and Tick Marks

Available

Draw a horizontal or vertical pixel ruler on the page. Adjust length and tick spacing, and view window size plus device pixel ratio to check CSS pixel measurements against layouts and mockups.

Pixels Ruler Measure
Open tool

Aspect Ratio Calculator

Aspect Ratio and Proportional Size Calculator

Available

Compute and lock an aspect ratio in your browser. Derive a ratio from width and height, or change one side while the other stays proportional. Includes common presets and a preview for cropping, video frames, and responsive layouts.

Ratio Size Design
Open tool