CSS Sniffer

CSS Sniffer is the ultimate CSS inspection toolkit for designers and developers. Hover over any element to instantly see its styles, then dive deep with advanced analysis tools. INSPECT • Hover to preview CSS — click to lock and explore • Live CSS editing with undo/redo • Box model visualization • Navigate the DOM with arrow keys • Pin multiple elements for comparison ANALYZE • Color palette extraction grouped by hue • Typography scanner (fonts, sizes, weights, line heights) • CSS custom properties detection • Full design token extraction • Cross-element pattern detection PERFORMANCE • CSS performance audit with a 0–100 score • Detect unused CSS, expensive selectors, and redundant rules • Responsive breakpoint discovery • Animation and transition inspector ACCESSIBILITY • WCAG contrast ratio checker (AA/AAA) • Cascade and specificity visualizer TRACK CHANGES • Visual regression snapshots • Style diff between elements • Full style change history EXPORT (11 Formats) • CSS, SCSS, CSS Variables • Tailwind CSS + Tailwind Config • styled-components • React, Vue, and Svelte components • CodePen • Figma Tokens JSON • Style Dictionary • Full HTML report Dark mode support — follows your system preference. Zero dependencies. Zero data collection. 100% local processing.