CSS Lens

Inspect, edit, and export styles without leaving the page CSS Lens is a focused developer tool for front-end engineers and designers who want to move faster. Open the panel on any site, hover to inspect, pin to go deeper, and ship cleaner styles with less context switching. Stop juggling DevTools panes, copy-pasting snippets, and hunting through stylesheets. CSS Lens keeps your attention on the UI: live-edit styles in place, extract design tokens in one pass, and export code you can drop into your project. ∗ Inspect at a glance — See the minimal, de-duplicated CSS for the hovered/pinned element, including responsive media rules and state-specific styles (e.g., :hover, :focus). ∗ Edit live, in context — Tweak properties with a fast editor, color picker, and scope controls (base, media query, state). Changes apply to the pinned element only, so you can experiment safely. ∗ Export clean code — One click to copy the full CSS block (core + responsive + states). Pro users can export production-ready CSS and React scaffolds. ∗ Analyze a subtree — Instantly extract colors, active fonts (not just the stack), spacing tokens, used CSS variables, and assets, plus a quick contrast check summary. ∗ Preference-aware output — Choose HEX/RGB/HSL (with optional UPPERCASE HEX) and px or rem. The UI and exports follow your settings. ∗ Readable by design — Syntax-highlighted CSS, active-font detection, and simplified font stacks for portability. Built for speed and signal ∗ Clutter-free output — We normalize and sort declarations, remove redundancies, and keep custom properties readable. ∗ Accurate font identification — We detect the actual font in use, not just the first token in font-family. ∗ Modern, neutral UI — Light/dark themes and compact/comfortable density. ∗ Page content is analyzed locally. CSS Lens does not upload site content for inspection. Notes & limitations ∗ Due to browser security, some cross-origin stylesheets can’t be read; CSS Lens will still show computed/inline styles and anything same-origin. ∗ Works best on modern Chromium-based browsers. Level up your styling workflow: inspect faster, edit confidently, and export code that’s ready to paste. Install CSS Lens and make the browser your design surface.