UnitShift — CSS Unit Converter — Dixie Raiz Pacheco

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