Hairline: CSS Inspector & Dev Tools

Hairline puts 15 web design and development tools in your browser's side panel. Inspect any element's CSS, edit text and styles live, pick colors, measure layouts, swap fonts and export what you find. FREE TOOLS • CSS Inspector: hover any element to see its box model and styles • Live Text Editor: edit any text on the page in place • List All Fonts: every font family, weight and size used on the page • Color Picker: pick any pixel and copy HEX, RGB or HSL • Page Ruler: drag to measure anything in pixels • Page Outliner: outline every element to see the HTML structure • Delete Element: remove or hide anything, and undo any time • Screenshot: capture the visible area or an element • Send to AI: ask Claude, ChatGPT or Gemini about any element or page HAIRLINE PRO ($29, one-time payment) • Live CSS editing in the inspector, and full-page screenshots • Fonts Changer: swap fonts on the whole page or a single element • Color Palette: extract every color a website uses • Move Element: drag elements to try new layouts • Export Element: copy any element as standalone HTML + CSS • Extract Images: find every image and download them all • Image Replacer: swap any image with a file or URL • More Send to AI prompts: recreate a component, edit it with words, accessibility review and style guide One payment, no subscription. Use Pro in up to 3 browsers, with a 14-day money-back guarantee. PRIVATE BY DESIGN Hairline runs on your device. No accounts, no analytics, no tracking. Pages you inspect never leave your browser. Works in Chrome, Microsoft Edge and Brave. Website: https://bencounsell.com/hairline/