Free
$0forever
- Full CSS inspector with cascade view
- Ruler with alignment guides
- 3 annotations per site per day
- Share links last 24 hours
- Website color overview
NewFeatured on Product Hunt · Chrome & Firefox
Understand any website in one hover.
Inspect CSS, annotate pages, collaborate live, and pull colors, fonts and assets — fromall from one lightweight browser extension for developers, designers and agencies.
Free forever plan · Chrome & FirefoxNo account needed to inspect
#2563eb
acme-store.dev/pricing
.plan-card
1
Inspect
Hover any element to see the CSS that shaped it.
.plan-card {
padding: 24px;
border-radius: 12px;
padding: 16px;
}
Works on any page your browser opens
ProductionStaginglocalhost:3000ChromeFirefox
How it works
Up and running in three clicks
1
Add to browser
Install in seconds and pin it to your toolbar.Install the extension in seconds and pin it to your toolbar.
2
Open any webpage
Production, staging or localhost — if your browser opens it, Sparrow reads it.Production, staging or localhost — if your browser can open it, Sparrow can read it.
3
Inspect, annotate, measure
Six tools on one slim rail. No DevTools, no screenshots.Switch between six tools from one slim rail. No DevTools, no screenshots.
Six tools, one rail
Everything you need to understand any website
CSS inspector
Hover anything and see the CSS that shaped it — overridden rules struck through, the winner on top.Hover anything and see the CSS that actually shaped it — DevTools-style, overridden rules struck through, the winning declaration on top.
/* winning */
.btn-primary {
background: #2563eb;
border-radius: 8px;
}
/* overridden */
button { border-radius: 4px; }
Annotate & share
Drop a numbered pin on the exact element, write your note, share one link. Clients reply live.
123Client Mode on
Ruler
Anchor one element, hover another — Sparrow draws the exact distance.
48px
Colors
Every color a page paints, sorted by usage. Swap any one site-wide.Every color a page paints, sorted by how much it’s used. Swap any one site-wide.
Fonts
Audit every typeface, then preview a swap from ~1,900 Google Fonts or your own upload.
AaAa
Assets
Assets
Every image, SVG and video — background images and favicons included.Every image, SVG and video on the page — background images and favicons included. Download one or all.
+24+ 24 more
Who it’s for
One toolkit, four jobs done
</>
Frontend developers
Debug styles faster. Copy CSS or Tailwind classes straight into code.Debug styles faster than DevTools. Grab fonts, margins and winning rules, then copy CSS or Tailwind classes straight into your code.
Designers
Pull palettes, identify typefaces, test fonts live, collect assets.Reverse-engineer interfaces. Pull palettes with usage data, identify typefaces, test your fonts live and collect assets for moodboards.
1
Agencies & freelancers
Turn vague client feedback into pinned, resolvable comments.Turn vague client feedback into pinned, threaded, resolvable comments. One link, live collaboration, clear status.
±2px
QA & product teams
Report visual bugs in context, measured against spec.Report visual bugs in context, measure spacing against spec and flag misalignments devs can find without a repro guide.
PricingMost popular
Start free. Upgrade when you pin more.
Pro
- Everything in Free, plus:
- 10 annotations per site per day
- 30-day share links
- Multiple color format toggle
- Site-wide color swapping
- Font testing Google Fonts + your own uploads
- Asset downloads, single or ZIP
- Multiple color formats support
- Priority support
Max
- Everything in Pro, plus:
- Unlimited annotations
- Share links that never expire
- Priority support
Upgrade, downgrade or cancel anytime from your account portal. Paid features stay on through the billing period.
FAQ
Questions, answered
A browser extension that overlays a design toolkit on any webpage — inspect CSS, measure spacing, pull colors, fonts and assets, and pin feedback without DevTools or screenshots.
No. Designers and clients hover to see fonts, colors and sizes in plain language; developers get the full CSS cascade and Tailwind detection.
Yes, and it doesn’t expire: CSS inspector, ruler, color overview, 3 annotations per site per day and 24-hour share links.
Pro is $9/month ($90/year) with 10 daily annotations and 30-day links. Max is $19/month ($190/year) with unlimited annotations and permanent links.
Yes, from your account portal. Paid features stay active through the billing period.
Limits reset daily. Hitting the cap only pauses new pins on that site — existing annotations stay saved and editable.
Never. Everything Sparrow does is a local preview only you see. The real website is untouched.
Pin comments, click Share and send the link. Recipients see annotations in context and collaborate live; link lifetime depends on your plan.
No. Client Mode lets reviewers reply and change status, but not edit or delete your notes.
Any page your browser can open: production sites, staging environments and localhost.
Yes. Tailwind utilities are shown separately and copy in one click.
Yes. Uploaded fonts are registered in your browser and never sent to a server.
Still curious? Write to hello@trysparrowcss.com and a human replies.
4
Stop guessing what’s on the page. Start knowing.
Add Sparrow to your browser — it’s free.