UnitShift — CSS Unit Converter for DevTools

About

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