PuraCSS

About

PuraCSS is a design inspection toolkit built for front-end developers and designers who need to move fast without leaving the browser. Dock it to your Chrome side panel and instantly inspect any element on any webpage.

──────────────────────────────
FEATURES
──────────────────────────────

✦ DOM Inspector
Click any element to extract its full CSS: padding, margin, fonts, colors, border-radius, box-shadow, and more.

✦ Color Palette
Scans the entire page and builds a visual palette. Click any color to copy instantly.

✦ Color Picker
Native eyedropper that captures any color from any pixel on your screen — inside or outside the browser.

✦ Typography & Font Scraper
Detects custom and system fonts, including line-height, letter-spacing, and weight. Live preview inside the panel.

✦ Tailwind CSS Converter
Converts inspected CSS values directly into Tailwind utility classes. Copy and paste — done.

✦ Asset Scraper & ZIP Exporter
Collects images, SVGs, and logos from the page. Copy SVGs directly or download everything as a ZIP.

✦ Brand Snapshot
Captures a website's full visual identity automatically — logo, colors, and typography in a single exportable kit.

✦ Responsive Preview
Resize any webpage to mobile, tablet, and desktop viewports instantly — without leaving the panel.

✦ Full-Page Screenshot
Captures a complete, high-definition screenshot of any webpage in one click.

✦ WCAG Contrast Checker
Scores text and background color contrast against AA and AAA accessibility standards.

──────────────────────────────
PRO
──────────────────────────────

✦ Light, Dark & Navy premium themes
✦ Unlimited access to all tools
✦ 7-day free trial — no credit card required

──────────────────────────────

No copy-pasting into external tools. No tab switching. Just inspect, extract, and build.

👉 Install for free and start inspecting in seconds.