CSS Stats

CSS Stats - Analyze and visualize your CSS

What It Does
CSS Stats is a fun browser extension that extracts and analyzes all styles from the current page you're viewing. With one click, you get comprehensive insights into:
Colors - See every color with usage and accessibility stats
Typography - Font families, sizes, weights, and line heights across your site
Spacing & Layout - Padding, margins, grid configurations, and responsive breakpoints
Selectors & Specificity - Understand selector complexity and potential refactoring opportunities
File Size Analysis - Original, minified, and gzipped sizes with compression insights
CSS Variables - Track custom properties and their usage patterns
Animations & Transitions - Catalog all animations and timing functions
Shadows & Borders - Visual inventory of box-shadows, text-shadows, and border styles

Why You Need It

🔒 Works Everywhere
Unlike web-based CSS analyzers that can only access public URLs, this extension works on:
Authenticated pages - Analyze your logged-in dashboards, admin panels, and private apps
Localhost - Perfect for analyzing sites during development

🚀 Lightning Fast
No need to copy-paste CSS or configure anything. Just:
Navigate to any webpage
Click the CSS Stats icon
Get instant, comprehensive analysis
Results open automatically in a new tab

📊 Professional Insights
Get the same analysis tools used by professional developers and designers:
Identify refactoring opportunities with duplication analysis
Find accessibility issues in color contrast
Discover unused or redundant CSS patterns
Export design tokens for design systems
Compare CSS across different pages or versions

🎨 Perfect For
Developers - Audit CSS quality, find optimization opportunities, debug specificity issues
Designers - Extract design systems, document color palettes, analyze typography scales
Performance Engineers - Identify CSS bloat, measure compression ratios, track file sizes
QA Teams - Verify design consistency, check responsive breakpoints, validate implementations
Students - Learn CSS best practices by analyzing real-world websites

Key Features

Comprehensive Analysis
50+ metrics covering every aspect of your CSS
Visual graphs for specificity, ruleset sizes, and color usage
Detailed breakdowns of properties and their values
Historical tracking to see changes over time
Beautiful Visualizations
Color circle packing for palette overview
Specificity graphs to identify problematic selectors
Grid template previews for layout analysis
Gradient showcases for visual effects
Export & Share
Download design tokens as CSS variables
Share analysis results with team members
Compare multiple pages side-by-side
Track changes over time
Privacy Focused
CSS analysis happens on our secure servers
No tracking or analytics on your browsing
Only activated when you click the extension
Open source and transparent

How It Works

The extension extracts all CSS from the current page (including external stylesheets and inline styles), sends it to the CSS Stats API for analysis, and opens a detailed report in a new tab. The entire process takes just seconds.
Use Cases
Before Refactoring - Understand your current CSS landscape before making changes
Design System Audits - Verify consistency across your application
Performance Optimization - Identify opportunities to reduce CSS file size
Learning & Education - Study CSS patterns from popular websites
Client Projects - Analyze existing sites before redesigns
Code Reviews - Validate CSS quality and maintainability

Get Started

Install the extension and click the icon on any webpage. That's it! No configuration, no API keys, no setup required.
Perfect for developers, designers, and anyone who works with CSS. Whether you're building a new site, maintaining an existing one, or just curious about how your favorite websites are styled, CSS Stats gives you the insights you need.
Made by designers and developers, for designers and developers. CSS Stats is an open-source project dedicated to making CSS analysis accessible to everyone.