CSS Viewer - Inspect & Copy Any Element's CSS

Tracking since Apr 11, 2026.

Changelog

• May 16, 2026
  description

  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

  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.
  • Pass-Through Mode — Hold Alt (or toggle the icon) to interact with the page normally — useful for inspecting hover states, dropdowns, and modals.
  • One-Click Copy — Click any element to copy its styles in whatever format you're currently viewing.
  
  Pro
  
  • SCSS, Tailwind, or JSX Output — Convert any element's CSS to the format you actually use. SCSS keeps the nesting; Tailwind gives you utility classes; JSX outputs an inline style object.
  • Pin Element Popovers — Press Space to pin the current popover in place. Drag, resize, scroll. Pin as many as you want for side-by-side comparison.
  • Trace Any Property — On any pinned popover, click the crosshair next to a property line. Every element on the page using that same value lights up. Combine filters across pins for AND-style matching.
  
  How It Works
  
  1. Click the CSS Viewer icon or press Alt+Shift+C
  2. Hover over elements to see their CSS
  3. Switch output formats using the dock at the bottom
  4. Click an element to copy its styles
  5. Press Space to pin a popover
  
  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

Permissions & access

Permissions

scriptingactiveTabstorage

Host access

None declared

Screenshots