InspectKit — Live CSS Editor

Inspect and edit live CSS on any website. Click any element, tweak values in real time, log changes and share annotated screenshots.

InspectKit is a CSS inspection and editing tool for web designers and developers. Activate it on any page, click any element, and edit its styles live — no DevTools required. ────────────────────────────── FEATURES ────────────────────────────── LIVE CSS EDITING Click any element to lock it in the panel. Edit typography, spacing, colour, and layout values with changes applied instantly in the browser. UNIT TOGGLES Cycle through px, rem, em, %, vw, and vh with a single click. Nudge values with arrow keys, or hold Shift to step by 10. COPY CSS Generates a clean, selector-scoped CSS block ready to hand directly to a developer. NOTES & CHANGE LOG Every edit is automatically logged with the element selector, property, and before/after values. Add notes and share a formatted summary for Slack, email, or your project tool. SCREENSHOT & ANNOTATION Capture the viewport, annotate with arrows, and download as a PNG for client presentations or developer handoff. STACK DETECTOR Scan any page to identify frameworks and libraries — Rive, Lottie, GSAP, Three.js, React, Vue, Webflow, Shopify, WordPress and more. ELEMENT TYPE DETECTOR Click any element to see its animation type — Rive, Lottie, animated SVG, CSS animation, or CSS transition. FONT DETECTOR See the font source for any element — Google Fonts, Adobe Fonts, self-hosted, variable font, or system font. INLINE TEXT EDITING Edit text content directly on the page to preview copy changes in context. SESSION RESET Clear all changes and restore the element to its original state at any time. ────────────────────────────── Free. No account required. Built by The Creative Supply Co. https://www.thecreativesupply.com ──────────────────────────────