CSS Scan — Inspect, Copy & Edit CSS on Any Website

Description

Inspect any element's CSS on hover, edit live, and copy clean CSS in one click. Faster than DevTools — works on every website. CSS Scan is the fastest way to see, copy, and edit CSS on any website. Hover any element, and its full, optimized CSS appears next to your cursor in a floating card. Click any value to edit it live — the change happens on the page in real time. Copy the whole ruleset with one click. No DevTools, no digging through the Elements panel. If you build websites, tweak themes, learn from other people's designs, or just want to grab that one shade of blue you saw somewhere — CSS Scan replaces the slow "inspect element → scroll through 40 computed styles → copy each property" ritual with a single hover. ━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✨ WHAT YOU CAN DO ━━━━━━━━━━━━━━━━━━━━━━━━━━━ Hover any element to see its clean, resolved CSS — only the rules that actually apply. Longhand properties are collapsed to shorthand where safe (margin, padding, border-radius, inset). Pseudo-states (:hover, :focus, ::before, ::after) and matching @media queries appear in their own collapsible sections. Cross-origin stylesheets that browsers hide are flagged so you know when a rule is missing. Click any value → it becomes an inline input with F12-style autocomplete. Type a new value, press Enter, and the element on the page updates instantly. Arrow ↑ / ↓ nudge numbers by 1 (Shift = ±10, Alt = ±0.1). Click a color swatch to open the native color picker and drag across the palette while the element previews in real time. Rename properties in place — click "padding" to change it to "margin", the value comes along. Add brand-new properties in-place — click below any decl, an empty "property: value" row appears exactly where you clicked, DevTools style. Autocomplete covers 60+ curated properties (display, position, cursor, flex-direction, justify-content, font-weight, color…) plus every CSS property Chrome supports, plus global values (inherit, initial, unset, revert). New properties go straight to element.style so they win the cascade. Copy the selector's full CSS with one click — with configurable options: include or exclude the selector wrapper, convert em/rem to px, drop box-sizing, drop vendor prefixes, format colors as HEX / RGB / HSL, and choose how to include :hover styles (skip, separate ruleset, SASS-nested, or merged). Every change you make is tracked. "Copy Edits" dumps just the properties you added or modified across the session in one clean ruleset. "Clear Edits" reverts them all in one click — pre-existing inline styles the page already had stay untouched. ━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎯 WHY DEVELOPERS PREFER IT ━━━━━━━━━━━━━━━━━━━━━━━━━━━ DevTools shows hundreds of computed properties, most of them browser defaults you don't care about. CSS Scan shows only what the author's stylesheet actually sets — the way you'd write it in a CSS file. The floating card follows your cursor and auto-pins the moment you move onto it, so editing values doesn't yank the panel away. The card can be dragged anywhere, docked wherever you like, and collapsed to a single top-edge chevron when you need the screen back. Click on any page while CSS Scan is active — clicks are blocked so an accidental tap doesn't navigate away mid-inspection. Hold Shift to pause and interact with the page normally. ━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🚀 HOW TO USE ━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Click the CSS Scan toolbar icon on any tab. 2. Hover any element — CSS appears in the card beside it. 3. Click a value → edit → Enter. Or click below any decl → type property: value → Enter. 4. Copy the CSS from the card, or Copy Edits from the toolbar to grab everything you changed. 5. Click the ✕ on the card (or the extension icon again) to close. Shortcut: Ctrl / Cmd + Shift + S also toggles the panel on the current tab. ━━━━━━━━━━━━━━━━━━━━━━━━━━━ ❓ FAQ ━━━━━━━━━━━━━━━━━━━━━━━━━━━ Q: Does CSS Scan work on every website? A: Yes — any http(s) page. Chrome-internal pages (chrome://, Web Store) are off-limits per browser policy. Q: Are my edits saved to the site? A: No. Changes are inline styles on the page in your browser only. Refresh the tab to reset. Use "Copy Edits" to save the CSS to paste into your own stylesheet. Q: What about styles from cross-origin CDNs (Bootstrap, Tailwind on jsDelivr…)? A: Browsers hide those from extensions for security. CSS Scan reads them when possible and shows a warning band when it can't. Q: Do you send my browsing data anywhere? A: No. Everything runs locally. The only network call is a license check to LemonSqueezy — nothing about the pages you inspect leaves your browser. Q: Is there a free version? A: Yes. Free tier lets you view any element's CSS and edit existing values without limit. A Pro license unlocks adding unlimited new properties per session. See pricing in the Options menu. Q: Does it work with Shadow DOM / Web Components? A: CSS Scan lives in its own Shadow DOM to avoid conflicts with the host page. For inspecting shadow trees on the page itself, DevTools is still your friend — Shadow Boundaries are locked by design. Q: Does the copied CSS include vendor prefixes? A: Toggle "Ignore vendor prefixes" in Options to drop -webkit-, -moz-, -ms-, -o- from copy output. Q: Can I convert em / rem to px automatically? A: Yes — enable "Convert em/rem to px" in Options. Handy for pixel-perfect comparisons. ━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔐 PERMISSIONS & PRIVACY ━━━━━━━━━━━━━━━━━━━━━━━━━━━ ● activeTab / tabs — needed to toggle the panel on your current tab. ● storage — remembers your options (color format, hover-style copy mode, etc.) across browser restarts. ● alarms — periodic license re-check once a day for Pro users. ● host_permissions <all_urls> — the panel injects a Shadow-DOM overlay on the page you're inspecting. No page content is read, sent, or stored. ● No telemetry. No analytics. No tracking scripts. ● License activation calls LemonSqueezy directly (public license API) — the extension does not maintain its own server. ━━━━━━━━━━━━━━━━━━━━━━━━━━━ Install free — inspect and copy the CSS of any website in seconds.

Details & SEO