Hover any element to inspect and copy CSS from websites

No. Switch the Inspector on and hover over the page. The hover inspect loop is the whole point: the HTML and CSS for whatever sits under your cursor appear in a floating panel, and if you dock that panel it stays open while you keep working on the page underneath.

Both, on a switch. Computed gives you the values the browser worked out, and those you can edit. Source gives you the rules the page's stylesheets declare, media queries and keyframes intact, and that includes sheets served from another origin such as a Tailwind or Bootstrap CDN: Hoverify fetches those and follows every @import. Nested rules, and rules wrapped in @layer, @supports or @container blocks, come through with the right selector. An inline style attribute gets a rule of its own, since it outranks everything in the sheets.

Yes. The copy menu has four options: the element's CSS, only the changes you just made, its selector, or a unique selector that reaches this one element and nothing else. Export sends the element and every child inside it to CodePen, or saves the same HTML and CSS as a file. When the element is an image or a video, the panel shows its file size and intrinsic dimensions with a download button beside them.

No. Your edits live in your own browser tab and disappear when you reload, so the live site is untouched. Hoverify writes them with !important so they beat the site's own selectors, then leaves that out again when you copy the CSS. If you want a change to survive reloads, Hoverify's Custom Code tool injects your own HTML, CSS and JavaScript into a site every time you visit it.

Yes, on the element you're already inspecting. You get the role and accessible name the browser resolved, the text contrast ratio against the one it needs to pass, the ARIA attributes in play and the violations the element trips.

Yes, and they're single keys rather than chords, because the Inspector is already listening while it's on. P pauses and resumes inspecting, I toggles the element panel, E editing, D the trash for hiding and removing elements, F fonts, C the color palette, S search, A the accessibility view, G grids, H guidelines and B the CSS box. Arrow keys move the selection through the DOM: up to the parent, down into the first child, left and right through siblings, and they carry on into an open shadow root. Those are the defaults and the popup's Shortcuts screen rebinds any of them. None of them fire while you're typing in a field.

Yes, for open shadow roots, which is what most component libraries ship. Hover reaches inside them, so the element you land on is the button inside the component. The Source view reads the stylesheets that shadow root adopted, because the page's rules never apply in there, and Hoverify writes your edits inside the root too, where a document-level style would never reach. Closed shadow roots stay closed to Hoverify, the same as for any other script on the page.

Yes. A color written as var(--brand) shows up as the value behind it, resolved against :root and followed through up to four levels of nesting and fallbacks. Modern syntaxes such as oklch, lab, hwb and color() sit in the grid alongside hex and rgb.

Chrome, Edge, Brave and other Chromium browsers, and Firefox. Every tool runs in both builds, and one license covers them.

The Inspector ships inside Hoverify, a paid extension that comes with 14 days to change your mind: buy it, use it on real work, and ask for your money back inside two weeks if it isn't for you. That refund is there in place of a trial build. A single license activates in 3 browsers at a time, and nothing renews itself without you. See the pricing.