Overview
Inspect, edit, and export styles with a clean, workflow-first panel.
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.
Details
- Version1.0.0
- UpdatedOctober 10, 2025
- FeaturesOffers in-app purchases
- Offered byBeaBea Lab Inc.
- Size1008KiB
- LanguagesEnglish (United States)
- DeveloperBeabea Lab Inc.
1188 3 St SE Unit 1606 Calgary, AB T2G 0Y5 CAEmail
support@beabealab.comPhone
+1 403-399-2228 - TraderThis developer has identified itself as a trader per the definition from the European Union and committed to only offer products or services that comply with EU laws.
- D-U-N-S243312072
Privacy
CSS Lens has disclosed the following information regarding the collection and usage of your data. More detailed information can be found in the developer's privacy policy.
CSS Lens handles the following:
This developer declares that your data is
- Not being sold to third parties, outside of the approved use cases
- Not being used or transferred for purposes that are unrelated to the item's core functionality
- Not being used or transferred to determine creditworthiness or for lending purposes
