The styles that matter
No crossed-out rules: font, size, weight, line height, color, background, borders, radius and shadow.
Design inspection
CSS inspector: hover and see how the page is built
The Smart Design Inspector CSS inspector shows the computed styles, box, margins, paddings and distances of any element on hover, without opening the developer tools.
Inspecting, measuring distances and the ruler: free forever
h1 · yourclient.example
- Font
- Inter
- Size
- 48 px
- Weight
- 600
- Line height
- 1.1
- Color
- #0B0B0B
- Background
- transparent
- Borders
- —
- Radius
- 0
- Shadow
- —
Copy CSS
margin024
border0
padding0
560 × 106
| To the button | 24 px |
| To the paragraph | 16 px |
| To the left edge | 64 px |
01
DevTools isn’t built for design
The problemIn DevTools, to find a headline’s font size you have to open the panel, find the element in the tree and scroll through a list of crossed-out rules. To find the distance between two blocks, you add up margins by hand.
02
What you see on hover
4 thingsBox
Width, height, margins and paddings drawn on the element.
Distances
Pin an element with a click and hover over another: you see the pixels between them.
Ruler
Hold down Alt and measure any area of the page.
03
Try it on this page
No installA sample website and the inspector panel, with nothing to install. Hover over an element, or pick it from the list, to see its styles, its box and the distance to the element below.
Pick an element
Smart Design Inspector · CSSh1.hero-title
- Font
- —
- Size
- —
- Weight
- —
- Line height
- —
- Color
- —
- Background
- —
- Borders
- —
- Radius
- —
- Shadow
- —
- Box
- —
- Margin
- —
- Padding
- —
Distance below
—
Sample website · values are read from this page
04
After inspecting
4 features| Free€0forever | Pro€49one-time payment | |
|---|---|---|
| Inspect on hover: computed CSS, box, margins and paddings | ||
| Copy the CSS of any element | ||
| Measure distances between elements, plus a ruler | ||
| Copy a section as JSX + Tailwind or HTML/CSS | — | Free early access |
| Export the design system | — | Free early access |
Is it free?
Yes. Inspecting, measuring distances and the ruler are free forever.
How is it different from DevTools?
It shows only the styles that apply, with no crossed-out rules, and draws measurements and distances on the page. DevTools is still better for debugging JavaScript or the network.
Does it work on any website?
On any page that opens in Chrome. The browser’s internal pages and the Chrome Web Store itself don’t let extensions read them.
Can I copy the CSS?
Yes, for each element. To copy a whole section as JSX + Tailwind or HTML/CSS, there’s the Pro feature.
Which browsers and operating systems does it work on?
Chrome, Edge, Brave, Arc, Opera and Vivaldi, on Windows, Mac and Linux, from version 1.0. It works the same everywhere because the browser runs the extension, not the operating system. The code is ready to be brought to Firefox and Safari without a rewrite. While it’s in development, things may change.
Waitlist
Be one of the first to try it
Smart Design Inspector is in development. Leave your email and we’ll let you know the day it goes live on the Chrome Web Store, with the 3 Pro features free in early access.
One email on launch day and very few more · Unsubscribe in one click