Lens works on any website in Chrome #
Lens is not a WordPress tool. It’s a Chrome extension that reads CSS from any webpage you can open in Chrome. Shopify stores, Webflow sites, Squarespace pages, Framer builds, custom-coded sites, client sites on platforms you don’t control, staging environments, and local development builds all work the same way: click the element that looks wrong, get the diagnosis.
The only requirement is that the page is open in Chrome and accessible to the browser. If you can see the element, Lens can read it.
Platform-specific notes #
Shopify #
Shopify themes load CSS from multiple sources: Shopify’s own framework, your theme, theme sections, and apps. App-generated CSS is particularly common as the source of conflicts, because apps often inject inline styles or load stylesheets with high-specificity selectors. Lens classifies the origin of every rule, so when an app’s CSS is overriding your theme, the diagnosis will name that. The triage step will usually be a settings change in the app or a CSS override in your theme’s custom CSS field.
Webflow #
Webflow generates CSS from its visual editor and stores it in generated stylesheets. The class names are often cryptic (Webflow uses its own naming system), but Lens reads the computed style rather than the class names, so the origin classification and conflict analysis still work. Webflow also frequently uses inline styles for element-specific styling. Lens detects Inline Style conflicts and can identify when a Webflow-generated Inline Style is overriding a class-based rule.
Squarespace #
Squarespace sites use a combination of Squarespace’s own framework CSS and custom CSS added through the Squarespace editor. Visual problems on Squarespace are often caused by Squarespace’s framework having very high-specificity rules that override custom CSS entered through the Custom CSS panel. Lens identifies these specificity conflicts and generates overrides at the correct specificity level when it offers a ready-to-paste fix.
Sites you don’t control #
You can run Lens on any site you can open in Chrome, including sites you don’t own or manage. This is useful for diagnosing visual problems on client sites where you don’t have admin access to the CMS, or for understanding how a design decision was implemented on a reference site. The capture file contains the CSS data for the element you clicked, which can serve as documentation or as a starting point for replicating a design in your own project. Note that Lens is a read-only tool. It reads CSS state. It can’t modify the page.