UnitShift — CSS Unit Converter

UnitShift is a DevTools sidebar that converts CSS units (px, rem, em) with one click — right where you're already inspecting elements.

The problem: AI-generated code and Figma-to-code workflows output everything in px. Converting to rem or em means mental math, calculators, or separate tools outside your workflow. Letter-spacing is especially tricky — its em value is relative to the element's own font-size, not the parent's.

How it works:

Open DevTools → Inspector panel Select any element UnitShift reads all computed CSS properties with unit values Click a convert button to switch between px, rem, and em The value is applied as an inline style instantly — same as editing in the Rules pane Features:

Context-aware em conversion — knows that letter-spacing, word-spacing, and line-height use the element's own font-size, while padding, margin, and other box model properties use the parent's Properties grouped by category: Typography, Spacing, Sizing, Position, Border Bulk "Convert All" to switch every value at once Configurable base font-size (default 16px) Zero configuration needed — works out of the box No permissions beyond DevTools access Pure HTML/CSS/JS, no frameworks, no external requests Who it's for: Front-end developers who work in DevTools daily, build from Figma designs, and need responsive, accessible CSS.

Built by Dixie Raiz Pacheco — dixieraizpacheco.com