CSS Inspector
Hover any element on any website to see its CSS: box model, fonts, colours and layout. Click to lock it, click a value to copy it.
- I Press I in the popup
- Runs in your browser
- Opens in a panel on the page
A CSS inspector that shows any element's styles without DevTools
CSS Inspector shows you how any part of a web page is styled, the moment you point at it. Turn it on, move your mouse over the page, and a small panel follows along with the element’s size, spacing, fonts, colours and layout. No right-click, no DevTools panel squeezing the page, no digging through a stylesheet to find the one rule that matters.
It is free, it works on any website, and the panel lives in its own sealed layer, so it never picks up the page’s styles or changes how the page looks.
Everything that shapes an element, in one panel
The Properties tab sorts the computed styles into the groups you actually think in:
- Box model: a diagram of the element’s width and height with its margin, border and padding on each side.
- Typography: font family, size, weight, line height, letter spacing and text colour.
- Colours: background, background image, border and outline colours, ready to copy.
- Layout: display, position and size, plus flex direction, alignment and wrapping for flex containers, and column and row templates with the gap for grid containers.
- Effects: shadows, opacity, transforms, transitions, filters and the cursor.
Click any value and it is copied to your clipboard. That makes it quick to grab a brand colour, a font stack or an exact padding value for your own project.
Copy the complete CSS
Switch to the CSS tab and you get the element’s styles written out as a clean CSS rule with a selector, grouped by category. One click on Copy CSS puts the whole block on your clipboard, ready to paste into your editor or a ticket.
Lock an element to study it
Hovering is great for exploring, but sometimes you need the panel to stay put. Click an element to lock it, then read through its values at your own pace. Press Esc to unlock and carry on hovering, and Esc again to turn the CSS Inspector off.
Who uses it
- Front-end developers checking why an element sits where it does, or matching a design without guessing values.
- Designers pulling exact fonts, colours and spacing from a live site to compare against the design file.
- Students learning CSS by seeing how real websites are put together.
- Support and QA teams describing a styling bug precisely instead of sending a vague screenshot.
If you want a working copy of a whole component, not just its values, Export HTML & CSS in DevToolkit Pro turns any element into code you can paste and run.
Tip: Open the DevToolkit popup and press I to start the CSS Inspector straight away.
How to inspect the CSS of an element
-
Turn it on
Open DevToolkit and click CSS Inspector (or press I). The popup closes and the inspector starts.
-
Hover and read
Move over any element to see its box model, typography, colours, layout and effects.
-
Lock and copy
Click to lock an element, click a value to copy it, or copy the full CSS. Esc unlocks, Esc again stops.
What you can do with the CSS Inspector
-
Live hover inspection
The panel follows your mouse and updates for every element you point at.
-
Visual box model
See margin, border, padding and content sizes in one diagram.
-
Flex and grid details
Direction, alignment, wrapping, templates and gap, only when they apply.
-
Click to copy
Copy any single value, such as a colour or font stack, with one click.
-
Complete CSS tab
Get the element's styles as a ready-to-paste CSS rule with its selector.
-
No clash with the page
The panel is sealed off from the site's styles, so it looks the same everywhere.
CSS Inspector questions
Is the CSS Inspector free?
Yes. The CSS Inspector is part of DevToolkit's free plan, with no time limit.
How is this different from Chrome DevTools?
DevTools shows everything, which is powerful but slow when you only want a few values. The CSS Inspector shows the styles that matter, sorted into groups, right next to the element, and lets you copy them in one click without leaving the page.
Does it show computed or written CSS?
It shows computed styles, the final values the browser uses after every stylesheet, inheritance and default has been applied. That is what decides how the element really looks.
Can I copy the whole element, HTML included?
The CSS Inspector copies styles. To export an element's HTML and CSS together as working code, use Export HTML & CSS, which is part of DevToolkit Pro, a one-time payment from $25.
Does it work on every website?
It works on regular websites. Browser pages such as chrome:// and the Chrome Web Store do not allow extensions to run, so the inspector cannot start there.
Try CSS Inspector today
Install DevToolkit free, then unlock every Pro tool with one payment. No subscription.