Meet

Meet

MotionTrails

MotionTrails

InspectKit a CSS inspection & editing tool for web designers & developers.

Activate it on any page, click any element, and edit its styles live — no DevTools required.

Get for free

Key Features

  • Live CSS editing — click any element, tweak values instantly, no DevTools needed

  • Unit toggles — cycle px, rem, em, %, vw and vh with a single click, nudge with arrow keys

  • Font detector — identifies Google Fonts, Adobe Fonts, self-hosted and variable fonts

  • Stack detector — scan any page for frameworks, CMS and animation libraries

  • Element detector — click any element to identify Rive, Lottie, animated SVG, CSS animation and more

  • Inline text editing — edit copy directly on the page to preview length and wording

  • Copy CSS — generates a clean, selector-scoped block ready for your developer

  • Notes & change log — every edit is automatically logged with before and after values

  • Share — export a plain-text summary to paste into Slack, email or Notion

Ideal for

  • Web designers reviewing live builds and staging sites with clients

  • Developers who want a faster way to explore and tweak CSS without opening DevTools

  • Creative directors checking typography, spacing and animation across a site

  • Anyone who's ever spotted something on a live site and wanted to know exactly how it was built

Whether you're reviewing a live build with a client, checking how a site handles type, or trying to figure out what's powering that animation — InspectKit puts the answer one click away.

Inspect any element. Edit styles in real time. Detect fonts, frameworks, and animation libraries without touching DevTools.

No digging. Just answers.

What Is MotionTrails

Live Editing & CSS Tools

  • Click any element to lock it in the panel and edit styles instantly

  • Typography, spacing, colour, layout — all editable in real time

  • Unit toggles: cycle px, rem, em, %, vw, vh with a single click

  • Nudge values with arrow keys, hold Shift to step by 10

  • Copy CSS generates a clean, selector-scoped block for your developer

Font & Type Detector

  • Edit text content directly on the page to preview copy changes in context

  • See the font source for any locked element

  • Detects Google Fonts, Adobe Fonts, self-hosted, variable fonts and system fonts

  • Shows the host domain for self-hosted fonts

Stack & Animation Detector

  • Scan any page to identify frameworks and libraries

  • Detects Rive, Lottie, GSAP, Three.js, Spline, Framer Motion and more

  • Also detects React, Vue, Next.js, Svelte, Webflow, Shopify, WordPress and more

  • Click any element to see its animation type — Rive, Lottie, animated SVG, CSS animation or CSS transition

Notes & Handoff

  • Every change is automatically logged with selector, property and before/after values

  • Add written notes to any change group

  • Share a formatted plain-text summary to Slack, email or your project tool

  • Capture the viewport, annotate with arrows, and download as a PNG