hello@madbear.io
Free Consultation
Madbear CSS — Inspect Any Website Like a Designer
Chrome Extension v2.0 — May 2026

Inspect any website
like a designer

Hover any element to extract fonts, colors, spacing, and CSS — instantly. Scan pages for emails and social data. No DevTools. No guessing.

Add to Chrome — Free See features
★★★★★ 4.8 rating Designer-first tool No DevTools needed
madbear.io — any site you visit
Inspector — <h1>
Font Arboria
Weight 800
Size 3.5rem
Color
#13383D
Line-H 1.06
Tracking –0.025em
Padding 0
Page Colors
#13383D Primary
#3B7C6C Teal
#D48656 Orange
⌘ Copy CSS ↗
Visual Inspector
One-Click CSS Copy
Design Token Export
Email Scanner
Font & Color Reader
Social Scraper
Zero DevTools
Visual Inspector
One-Click CSS Copy
Design Token Export
Email Scanner
Font & Color Reader
Social Scraper
Zero DevTools
Features

Everything designers and developers
need. In one extension.

Two powerful modes — a visual CSS inspector and an intelligent page scanner — built to replace hours of DevTools digging with seconds of effortless insight.

Inspector

Hover any element.
See everything instantly.

Move your cursor over any element on any website. A clean overlay surfaces fonts, colors, spacing, padding, margins, line-height, and computed styles — no config, no code.

Fonts Colors Spacing Borders Shadows Line height
Inspector <h2> .hero-title
Font Family Arboria
Font Size 3rem
Weight 800
Color
#13383D
Margin Bottom 1.5rem
Letter Spacing -0.02em
⌘ Copy CSS ↗
CSS Output

Copy clean CSS.
Paste. Done.

One click copies production-ready CSS for any element. No cleaning up browser junk, no rewriting values. The output is ready to drop straight into your codebase.

Clean output One click All properties Computed values
extracted.css Copy All ↗
/* <h2> .section-title */
.section-title {
font-family: 'Arboria', sans-serif;
font-size: 3rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
color: #13383D;
margin-bottom: 1rem;
}
Design Tokens

Extract the entire
design language.

Go beyond single elements. Madbear CSS surfaces recurring values — full color palettes, type scales, spacing systems — so you can understand and replicate any site's design system.

Color palette Type scale Spacing system CSS variables
Design Tokens — madbear.io Export ↗
Primary #13383D
Accent #D48656
Teal #3B7C6C
H1 Font Arboria 800
Base size clamp(15px…17px)
Radius 4 / 6 / 12 / 100px
Page Scanner

Surface contact data
from any page.

Switch to Scan mode and instantly pull all public emails, social profiles, business names, and linked sites from any page. One click. No manual digging.

Emails Social links Phone numbers Websites
Page Scan Results 6 found
Email
hello@madbear.io
Copy
Twitter / X
@madbear_io
Copy
LinkedIn
linkedin.com/company/madbear
Copy
Website
madbear.io
Copy
Reviews

Designers and developers
love it. Here's why.

Used by UI designers, frontend developers, growth teams, and researchers who need instant design insight without digging through code.

Pricing

Simple, honest pricing.

Free to install and use. Upgrade for unlimited access — no usage caps, no surprises.

Free
$ 0 /month

Everything you need to start inspecting. No credit card, no account required.

  • Inspect & copy styles
  • Color palette & typography
  • Scanner: names, emails, phones
  • Profiles grouped by person
  • CSV export & Tailwind export
Add to Chrome
Premium
$ 5 /month

For designers and developers who inspect every day. Unlock the full toolkit.

  • Inspect & copy styles
  • Color palette & typography
  • Scanner: names, emails, phones
  • Profiles grouped by person
  • CSV export & Tailwind export
Get Premium — $5/mo
Free to install

Turn every website
into a design resource.

Add Madbear CSS to Chrome and start inspecting any site in under 60 seconds.

Add to Chrome — Free hello@madbear.io