CSS Lens

Name: CSS Lens
Rating: 5 (1 reviews)
Author: BeaBea Lab Inc.

Inspect, edit, and export styles with a clean, workflow-first panel.

As of June 2026, CSS Lens has 6 users and a 5.00/5 rating from 1 reviews in the Developer Tools category.

BeaBea Lab Inc.Developer Tools

Chrome Web Store ↗.crx

Users−45.5%

Rating0%

5.00

1 reviews

Reviews0%

Version

1.0.0

Manifest V3

History

6 snapshots

Tracking since Apr 2, 2026.

View as table

Date	Users	Rating	Reviews	Version
Apr 2, 2026	11	5.00	1	1.0.0
Apr 19, 2026	12	5.00	1	1.0.0
May 4, 2026	11	5.00	1	1.0.0
May 13, 2026	8	5.00	1	1.0.0
May 25, 2026	5	5.00	1	1.0.0
Jun 7, 2026	9	5.00	1	1.0.0
Now	6	5.00	1	1.0.0

Permissions & access

Permissions: activeTabscriptingstoragewebNavigationalarms
Host access: <all_urls>

Screenshots

About

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.