Skip to main content
LibraTool logoLibraTool

Free Pixel to REM Converter

Convert between px, rem, em, pt, vw, vh, and % with a configurable base font size. Includes a reference table for common pixel sizes.

Works offline once loaded
1rem

Context (affects rem/em/vw/vh/%)

All conversions for 16 px

Nearest Tailwind tokens (at 16px root)

Common pixel sizes β†’ rem (at 16px base)

Convert pasted CSS

Common uses

  • PX to REM for Web DevelopmentConvert pixel values to rem units for scalable, accessible CSS. Set your base font size and instantly see all equivalent values.
  • CSS Units for Responsive DesignConvert between px, vw, vh, and % to build layouts that respond correctly to different screen sizes and orientations.
  • Convert Design Specs to CSS UnitsTranslate Figma or Sketch pixel values to rem/em units for clean, scalable CSS implementation.
  • Tailwind CSS Unit ReferenceUnderstand how Tailwind CSS sizing classes map to pixel and rem values for precise implementation.
  • Convert CSS Units for Print StylesheetsConvert between px, pt, and rem for print media queries and PDF output CSS.

How It Works

All conversions run entirely in your browser using a hand-written arithmetic engine with zero dependencies. The tool converts between seven CSS units (px, rem, em, pt, vw, vh, and %) by routing every calculation through pixels as a common base, applying simple division or multiplication against your configured root font size, parent font size, or viewport dimensions.

  1. 1
    Set your context values
    Before converting, you configure the four numbers that make relative CSS units meaningful: root font size (default 16px, which is the browser default), parent element font size (for em and % conversions), and viewport width and height (for vw and vh). These are the same values your browser would use when resolving CSS at runtime.
  2. 2
    Pixel as the universal intermediate
    The converter first calls toPixels() to normalize your input to a raw pixel count β€” for example, 1.5rem becomes 1.5 Γ— baseFontPx, and 50vw becomes 0.5 Γ— vpWidth. Then fromPixels() divides that pixel count by the appropriate factor for the target unit. All seven units are shown simultaneously in the conversion table.
  3. 3
    Nearest Tailwind token lookup
    After converting, the tool computes the rem value and scans two hardcoded lookup tables β€” Tailwind's thirteen font-size tokens (text-xs through text-9xl) and its spacing scale β€” finding the closest match by absolute distance. An = sign means the value is an exact token; β‰ˆ means it is the nearest approximation.
  4. 4
    Batch CSS rewriting via regex
    The paste-CSS panel accepts raw CSS text and applies a regex substitution: in px→rem mode it matches every px token and replaces the numeric part with value/baseFontPx + rem; in rem→px mode it does the reverse. The substitution count is shown so you can verify how many values were rewritten.

Related Tools

πŸ“

Unit Converter

Convert between units of length, weight, temperature, area, volume, and more.

Try it
πŸ“

CSS clamp() Generator

Generate a fluid CSS clamp() value for responsive typography and spacing. Set min/max size and viewport range, see a live preview, and copy the one-line CSS.

Try it
🟦

CSS Grid Generator

Visually design a CSS grid β€” tracks, units and gaps β€” and copy the generated CSS and HTML.

Try it

Frequently Asked Questions