Css Viewer Inspect Copy A

Hover over any element. See its CSS. Copy it. That's it.

CSS Viewer shows you the exact styles applied to any element on any page. No digging through DevTools panels, no hunting through stylesheets. Just point at something and get the CSS.

What You Get

• Matched CSS Rules — See every rule that applies to an element, in specificity order. Overridden properties are shown with strikethrough so you know what's actually active.

• Computed Styles — The final, resolved values for every property. What the browser is actually rendering.

• SCSS Output (Pro) — Nested SCSS with proper nesting structure, ready to drop into your project.

• Tailwind Classes (Pro) — Converts CSS properties to Tailwind utility classes. Useful when migrating to or working with Tailwind CSS.

• JSX Inline Styles (Pro) — Outputs a JavaScript style object for React, JSX, and CSS-in-JS workflows.

• One-Click Copy — Click any element to copy its styles in whatever format you're currently viewing. CSS, SCSS, Tailwind, or JSX.

How It Works

1. Click the CSS Viewer icon or press Alt+Shift+C
2. Hover over elements to see their CSS in a floating popover
3. Switch between output formats using the dock at the bottom
4. Click an element to copy its styles

Pro

Free gives you matched CSS rules, computed styles, and copy. Pro adds SCSS, Tailwind, and JSX output formats. One-time $5 purchase, no subscription.

Details

• Works on any website
• Light and dark mode (follows your system preference)
• Keyboard shortcut: Alt+Shift+C (customizable)
• Lightweight — only runs when you activate it
• No data collection, no analytics, no tracking
• All processing happens locally in your browser