UnitShift — CSS Unit Converter for DevTools

Convert px, rem, and em units with one click inside Chrome DevTools. Select any element and apply conversions live.

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 → Elements 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 Styles 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 Chrome DevTools daily, build from Figma designs, and need responsive, accessible CSS. Built by Dixie Raiz Pacheco — dixieraizpacheco.com