Inspect and copy CSS from any website by hovering
Hoverify is a CSS inspector extension that shows the HTML and CSS behind whatever your cursor is on: the rules your own stylesheets declare, not only the computed values. Edit or copy them without opening DevTools.
What the CSS inspector shows you
Point at an element and the panel fills with its markup and styles. Dock the panel and the page underneath stays clickable while you work.
Source CSS. Switch from the computed values to the rules your own stylesheets declare, with their media queries and keyframes still in place.
Pseudo classes. Rules for :hover, :focus and ::before come through too, so a style can't hide in a state you're not in.
Media queries. Every breakpoint's rules sit with the rest of the element's CSS, and so do its keyframe animations.
Visual editor. Spacing, typography, borders, background, transforms and position, each with its own control instead of a line of CSS to type.
Syntax highlighting. The CSS comes highlighted and editable in place, so it reads the way it does in your editor.
Export. Copy the CSS, send the element and its children to CodePen, or save the HTML and CSS as a file.
HTML attributes. The HTML tab lists the element's attributes as editable fields. Rename one, change a value or add a new pair and the page takes it immediately.
Inner HTML. The markup inside the element opens in an editor of its own. Rewrite it and the page redraws as you type, so you can try a structure before you build it.
Walk the DOM. Arrow keys move the selection to the parent, the first child or either sibling, which beats hunting for a nested element with the cursor.
Everything the Inspector can do
The panel does more than show styles. You can rewrite copy in place, take elements out of the layout and pull the colors and fonts a page uses.
Edit Copy
Rewrite any text on the page and read it in place. Better to find out a headline doesn't fit now than after it ships.
Hide or Remove Elements
Hide or erase anything to see what the layout does without it. Hoverify lists everything you take out, so you can put any of it back.
Color Palette
Every color the page's stylesheets declare, collected into one grid. Click a swatch to copy it. Iframes get a grid of their own.
Font Viewer
The fonts each tag actually renders in, with a link to the file they came from, so you stop guessing which one won.
Search
Find elements by tag, id, class or any CSS selector you can write. Hoverify outlines every match and scrolls the page to the first one.
CSS Box
Hoverify draws the box model over the element itself, so you see its padding and margin where they actually sit.
Grids. Outline every element on the page at once, so you can see how the layout is actually built.
Guidelines. Horizontal and vertical rules run out from the element you're on, so you can see what lines up with it.
Accessibility. Role, accessible name, contrast ratio and ARIA attributes, with the violations the element trips.
What developers and designers say about the Inspector
Reviews that call out inspecting by name.
Michael Andreuzza
been playing with @hov3rify almost the whole day pure joy. This lovely tool is gonna help you a lot when inspecting CSS...love it
Madhu Menon
Found an incredibly useful web design / development tool called Hoverify. Allows you to inspect elements on any site, copy styles, show grids, check on different viewports, grab asset lists, hide elements, and a whole lot more.
Frequently Asked Questions
Have a question we haven't answered? Get in touch.
Do I need to open DevTools to inspect a page?
No. Switch the Inspector on and hover over the page. 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.
Does it show the source CSS or just computed styles?
Both, on a switch. Computed gives you the values the browser worked out, and those you can edit. Source gives you the rules your own stylesheets declare, with their media queries and keyframes intact.
Can I copy the CSS or take the component with me?
Yes. Copy the element's CSS, its selector, or only the changes you just made. Export sends the element and every child inside it to CodePen, or saves the same HTML and CSS as a file.
Do my edits change the real website?
No. Your edits live in your own browser tab and disappear when you reload, so the live site is untouched. 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.
Does it check accessibility too?
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.
Does the Inspector have keyboard shortcuts?
Yes, and they're single keys rather than chords, because the Inspector is already listening while it's on. I toggles the element panel, E editing, C the color palette, S search, G grids and A the accessibility view. Arrow keys move the selection through the DOM: up to the parent, down into the first child, left and right through siblings. 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.
Which browsers does the Inspector work in?
Chrome, Edge, Brave and other Chromium browsers are fully supported. Every tool runs in the Firefox build too; it carries an experimental label because Chromium gets fixes and new features first.
Is the Inspector free?
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.
Built for the way developers and designers work
Hoverify keeps inspection, responsive testing, capture and page audits in one extension, so a problem you spot in the CSS never needs a second install to test it or hand it over.
- 3 browsers per license
- 14-day refund
- No auto-renewal
Hoverify
Keep reading
Guides from our blog that go deeper on this.
How to extract CSS from any website
The difference between computed and authored styles, and how to get the CSS you want out of a page.
Read the guideDebugging CSS: a systematic approach to layout issues
A five-step process for finding what broke your layout instead of guessing at properties.
Read the guideEditing CSS in production, safely
How to rehearse a hotfix on a live site without shipping a mistake to real users.
Read the guideCSS Peeper vs Hoverify
An honest comparison of the two extensions, including where CSS Peeper is the better pick.
Read the guide