Your CSS change did nothing.
Something else is winning.
Lens shows you what.
Not just the reason. A specific next step: a CSS override you can make yourself, a settings change, or a developer handoff with everything they need to fix the issue.
7-day free trial · No card required · Any website in Chrome
Your CSS change did nothing.
Lens shows you what’s winning and why your value lost.
7-day free trial · No card required · Any website in Chrome
The button is the wrong color. You changed it in your theme settings and refreshed. Still wrong. You cleared the cache. You added a CSS rule. Added !important. Posted on Reddit. Found a forum thread from 2012 where the accepted answer doesn’t apply to your setup and the person who asked it hasn’t logged in since 2014.
You opened DevTools. You found the panel with all the CSS rules. Half of them had lines crossed through them. You didn’t know which one was winning or why. You closed DevTools.
!importantstill wrongEvery other CSS tool shows you what’s applied. Lens is the first one built to answer a different question: why isn’t your own change working, and what rule is in the way of the specific property you’re trying to change.
The browser has known the entire time. It’s been sitting there with the answer. Lens reads it and shows you exactly what’s winning and why your value lost.
The link renders mauve, not white, even though the inline edit set white. The loupe shows why.
Click the element. Tell Lens what you’re trying to change.
See what’s winning and why your value lost.
Click directly on the broken element. The inspect panel shows every non-default CSS property on it as a clickable row. Click the property you’re trying to change. Type the value you want. Then click Diagnose.
Lens shows you what’s winning right now: the selector, where the rule came from, and whether it’s using !important, a @media query, or a CSS layer. Below that, every rule that tried and lost, with a reason, in real human terms, for why each one lost. No other CSS tool in Chrome does this.
The fix took five minutes.
Finding it took three hours.
That’s the gap Lens closes. You tell it which property you’re trying to change. It shows you exactly what’s in the way.
Shows you what’s winning for the specific property you’re trying to change
You click the property you care about. Lens shows you the rule that’s beating yours, where it came from, and why it won. Not a dump of every rule on the element. The answer to your specific question.
Names where every rule came from
Theme. Plugin. Page builder. Inline style. JavaScript injected after the page loaded. Every rule is labeled with its source so the next step is specific to what you actually control.
Works on any website in Chrome
WordPress, Shopify, Webflow, Squarespace, Framer, Elementor, custom builds. If it opens in Chrome, Lens can read it. The CSS cascade works the same way on every site.
See your change before you commit to it
Type the value you want and Lens applies it to the live page so you can see exactly what it looks like. Then it tells you whether that change would actually hold, or whether something is set to override it.
7 days free, no card required
Install Lens and run unlimited diagnoses for 7 days. No card required. Trial starts on your first diagnosis. After 7 days, the annual plan is $49/year for unlimited diagnoses on any website in Chrome.
Three steps. No panels, no modes, no setup.
Click the element. Click the property you’re trying to change. Type the value you want. That’s it. A colored outline confirms Lens captured the right element before you run a diagnosis.