The 12 best Chrome extensions for web designers
Grouped by the job they do rather than ranked in a line, because the right pick depends on which of these jobs you do every day. Every entry names what it is bad at, including ours.
If you install one: Design Toolkit for inspecting, measuring and copying a live design, or VisBug if you would rather edit the page than read it. Add ColorZilla for colour work and Responsive Viewer if you check breakpoints daily. Everything past that is a second copy of something you already have.
How to pick, in one paragraph
These tools split into two camps and most people only need one of them. Readers tell you what the page is: hover an element, get its values. Editors let you change the page in place: drag, restyle, see it live. Readers are for rebuilding something; editors are for proposing a change to something. Installing one of each and using neither properly is the usual mistake.
Inspecting CSS and layout
Design Toolkit Ours
One hover gives the box model, the spacing to its neighbours, the rendered font with weight and tracking, the colours with contrast, and the transition and animation timings. It reads hover and focus states without you having to force them, and can hand the whole thing to an AI assistant as a structured brief.
Weak spot: it reads, it does not edit. And it is paid after the trial.
VisBug
A design toolbar on top of any page, from the Chrome team's Adam Argyle. Move things with arrow keys, change type, swap colours, and measure distances by holding a key. The closest thing to using Figma tools on a live site.
Weak spot: built for changing, not recording. Getting a full set of values out of it to rebuild elsewhere is slow.
CSS Peeper
A clean panel that strips the cascade down to what a designer cares about: the element's typography, colours and assets, plus a page-wide palette and a list of downloadable images.
Weak spot: nothing about motion, states, or the spacing between elements.
Chrome DevTools
Still the most capable thing on this page. The full cascade with overridden rules struck through, the computed tab, the animations timeline, the contrast picker, device emulation and Lighthouse. Nothing here replaces it.
Weak spot: it answers slowly. Every question costs a panel, a selection and a scroll through inherited rules.
Full comparison of CSS inspectors →
Measuring spacing and alignment
Design Toolkit
Hover one element, hold to pin it, hover a second, and you get the real gap between their edges — not a line you dragged by eye. Because it reads the rendered geometry, the number survives zoom, device pixel ratio and transforms.
Weak spot: no free-drag ruler for measuring across an image.
Page Ruler Redux
Draw a rectangle anywhere and read its width, height and position. Because it does not care about elements, it works on images, canvases and video — anywhere a DOM-aware tool has nothing to grab.
Weak spot: you are measuring by hand, so the number is only as accurate as your drag.
Dimensions
Crosshairs that snap to edges it detects in the pixels and report the distance. Fast for eyeballing the rhythm across a layout.
Weak spot: edge detection guesses, and guesses wrong on soft shadows and gradients.
Full comparison of ruler extensions →
Colour
ColorZilla
The veteran. An eyedropper that samples any pixel, a page analyser that pulls the whole palette at once, a gradient generator, and a history of everything you have picked with where you picked it.
Weak spot: it samples pixels, so it cannot tell you the CSS behind a colour — a translucent overlay and a solid fill look identical to it.
Eye Dropper
One job, no account, no upsell. Pick a colour, copy it. If ColorZilla is more than you want, this is the rest of it removed.
Weak spot: that is the whole feature list.
Full comparison of colour pickers →
Fonts
WhatFont
Click the icon, hover text, read the name. Click for size, weight, line height and colour. It has done this one thing well for over a decade.
Weak spot: one element at a time, and nothing outside type.
Fonts Ninja
Identification with a licensing path attached: it links the font it found to where you can buy it, and saves fonts to a library.
Weak spot: built around the shop. More than you need if you only want the numbers.
Full comparison of font identifiers →
Breakpoints and responsive checks
Responsive Viewer
Puts every breakpoint on one canvas side by side, with synced scrolling, so you watch the whole set react to a change at once instead of resizing through them one at a time.
Weak spot: many frames on one page is heavy, and sites that gate on user agent still see a desktop browser.
Window Resizer
Snaps the actual browser window to a chosen resolution, with your own presets and keyboard shortcuts. Because it resizes the real window, the page gets a real viewport — no emulation quirks.
Weak spot: one size at a time, and it cannot go wider than your monitor.
Full comparison of responsive tools →
The whole list, side by side
| Tool | Type | Best at | Price |
|---|---|---|---|
| Design Toolkit | Reader | Every value off one element, states and motion included | Trial, then one payment |
| VisBug | Editor | Changing a live page like a design file | Free |
| CSS Peeper | Reader | A clean, designer-shaped summary | Free |
| DevTools | Both | Depth — the cascade, timelines, audits | Free |
| Page Ruler Redux | Ruler | Measuring anything, including images | Free |
| Dimensions | Ruler | A quick eyeball of spacing rhythm | Free |
| ColorZilla | Colour | Whole-page palettes and gradients | Free |
| Eye Dropper | Colour | One colour, no ceremony | Free |
| WhatFont | Type | Naming a typeface instantly | Free |
| Fonts Ninja | Type | Finding where to license it | Free tier |
| Responsive Viewer | Layout | All breakpoints at once | Free |
| Window Resizer | Layout | A real viewport at an exact size | Free |
Check the permissions before you install
An inspector has to read the page you are looking at — that is the job. What deserves a second look is broader than that:
- Read and change data on all sites, when hovering one element is the whole feature. Extensions of this kind can work with
activeTab, which only grants access to the tab after you click the icon. - An owner change. The common way a trusted extension becomes an adware one is being sold. If a tool you have had for years suddenly wants new permissions, read the changelog.
- Reviews that all arrived the same week. Sort by most recent, not most relevant.
One reader instead of four
Spacing, type, colour, contrast, states and motion from one hover — and a structured brief you can hand to an AI assistant. Free for 7 days.
Add to Chrome — free trialCommon questions
How many of these should I actually install?
Three or four. Every extension that injects into pages costs memory and can interfere with the page you are inspecting. One inspector that covers CSS, spacing, colour and type together, a colour picker if your inspector lacks one, and a breakpoint tool if you work responsive daily.
Do these work in Edge, Brave and Arc?
Yes — all Chromium, all install straight from the Chrome Web Store. Safari and Firefox are a different story: some have ports, most do not.
Why not just use DevTools?
DevTools is more capable than anything here and it is free. The trade is speed: it answers by opening a panel and making you read a cascade, while these answer by hovering. For lots of small questions across a page, the hover wins.
Are free design extensions safe?
Read the permissions. Reading the page you are on is reasonable for an inspector. Access to all sites with no obvious reason is not, and an extension that changed hands deserves a look at its recent reviews.