CSS Sniffer

About

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.