InspectKit — Live CSS Editor

About

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
──────────────────────────────