CSS Stats

Analyze CSS from any page - including localhost and authenticated sites

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.