CSS Viewer CSS Viewer

View and Copy Any Element's CSS.

Hover over any element to see its styles. Matched rules, computed values, Tailwind, SCSS, and JSX output.

Add to Chrome
CSS Viewer in action

Everything You Need

Matched Rules

See the exact CSS rules that apply to any element, in order of specificity.

Computed Styles

View the final computed values for every CSS property on the element.

One-Click Copy

Click any element to copy its styles to your clipboard in the active format.

SCSS Output

Get nested SCSS with variables, ready to paste into your stylesheets.

Tailwind Classes

Automatically converts CSS properties to their Tailwind utility equivalents.

JSX Styles

Outputs styles as a JavaScript object for use in React and JSX components.

Pass-Through Mode

Hold Alt to interact with the page normally — inspect hover states, dropdowns, and open menus.

Pin Popovers

Pin element popovers in place. Drag, resize, and compare multiple side by side.

Trace Any Property

Click the crosshair next to any property to highlight every element using the same value.