Loupely Lens  ·  CSS diagnostic
The browser knows why it looks wrong.
Lens translates it.

Click on the element that looks wrong. Tell Lens which property you’re trying to change and what you want it to be. Lens shows you what rule is winning, why every other rule lost, and what’s standing between you and your change. No other CSS tool in Chrome answers that question.

7-day free trial  ·  No card required  ·  Any website in Chrome

Loupely Lens · CSS diagnostic

The browser knows why
it looks wrong.

Click the broken element. Pick the property. See what’s winning.
Every losing rule explained. Every source named.
Works on any website in Chrome. No setup required.
Join the waitlist

7-day free trial No card required Any website in Chrome

Loupely Lens
Element captured
Add to cart

What is winning on this element

color: #8B7BA8
background: #1A1628
font-size: 14px
color: change to:
#FFFFFF
Diagnose
Step 1 · Inspect
Loupely Lens Changing color

Changing color

Your target: #FFFFFF

What is winning right now

.entry-content a, .entry-content a:visited
!important
theme · style.css
#8B7BA8

Rules that tried and lost

page builder · elementor-pro.css
#FFFFFF
Lost because: it uses !important with a more specific selector
inline style
#FFFFFF
Lost because: the winning rule loads later on the page
See full detail
Step 2 · Fight view annual plan · unlimited
Loupely Lens · Triage report
What’s causing it

Your theme’s stylesheet is overriding your page builder’s color setting. The theme rule has higher specificity and uses !important.

.entry-content a { color: #FFFFFF !important; }
Copy CSS rule
Download capture file
Step 3 · Fix it
Sound familiar?

The button is the wrong color. You changed the setting. You refreshed. Still wrong. You cleared the cache. You found a Reddit thread. Still wrong. You opened the browser inspector and saw a panel full of CSS rules with lines crossed out through half of them and had no idea which one was winning or why.

You were not confused because you were unqualified. The browser had the complete answer sitting right there. It just never told you which rule to fight or how to beat it.

That is what Lens reads. Everything the browser already knows. The winning rule. Every rule that lost and why. Where each one came from. No other tool in this market does that. Lens is the first.

The interaction

Click the element. Tell Lens what you’re trying to change.
See what’s in the way.

Not on a panel. Not after selecting a mode. You click the broken thing, pick the property you care about, and Lens shows you exactly what’s winning and why your value lost.

01

Click on the element that looks wrong

That’s the entire first action. A colored outline confirms Lens captured the right element.

02

Click the property you’re trying to change. Type the value you want.

Every non-default CSS property shows as a clickable row. Click the one you’re working on. Type what you want it to be. Lens applies it to the live page so you can see it before you diagnose anything. No other CSS tool in Chrome asks you this.

03

See what’s winning and why your value lost.

The rule beating yours: its selector, where it came from, why it’s winning. Below that, every rule that tried and lost, with a reason, in real human terms, for each. Diagnosis included with the annual plan.

What Lens captures

Everything the browser knows about why that element looks wrong.

One click captures the complete CSS state. Not just the winning rule. Everything. Full technical spec →

Every rule applying to the element

Every stylesheet with an opinion about how this element should look. Not just the rules that won. Every rule the browser considered.

The rule that beat your page builder’s setting is in there.

Every rule that lost, and why it lost

The rules the browser overrode. What overrode them. Why the wrong rule won. This is what DevTools shows as crossed-out lines with no explanation.

Lens shows you both sides of every conflict.

Where every rule came from

Origin classification on every rule: theme, page builder, plugin, inline style, JavaScript injection, browser default.

“Your theme is overriding your page builder” is only possible because Lens knows where each rule came from.

The full ancestor chain

Every parent element above the one you clicked, with the CSS constraints each one applies.

The most common reason a section will not center is a constraint two or three levels up. Lens reads the whole chain.

Which property you’re trying to change, and why it’s not taking your value

When you click a property row and type your target value, Lens uses that as the lens for everything it shows you. Which competing rule is blocking your specific change. What loss reason applies. Whether an override is possible and what it looks like. A generic cascade readout can’t do this. The diagnosis has to know what you’re actually trying to do.

No other CSS tool in Chrome takes this as input. Every other inspector shows you the cascade and leaves you to figure out what it means for your specific change. Lens answers that question directly.

The triage

Not a readout of CSS data. The specific answer to why your change didn’t work.

Every diagnosis produces a verdict in real human terms from a rule engine that reads the capture data directly. The verdict names the specific cause: a parent with display:none, a competing @media query, a CSS variable controlling the value, a rule with !important locking it. It’s not generated from a general description of the element. It’s derived from what the data actually shows.

Option 1: Fix it yourself

A ready-to-paste CSS rule

When the winning rule is something you can override with CSS, the triage page shows you the exact code to paste. If the selector matches multiple elements across your site, there’s a “This page only” scoped version. If the value is set by a CSS variable, there’s a second tab for updating the variable at its definition point.

In testing The diagnosis is live. This output format ships post-launch.

Option 2: Always available

A developer handoff package

The capture file plus a pre-written message with everything your developer needs to write a fix on the first try. Class names. Cascade context. Ancestor constraints.

Credential scan runs on every capture. API keys and tokens are removed before the file leaves your machine.

Loupely Lens · Triage report
1 capture

What’s causing it

Your theme’s stylesheet is overriding your page builder’s color setting. The theme rule has higher specificity and uses !important.

.entry-content a {
  color: #FFFFFF !important;
}

Option 1: Fix it yourself

In testing

Go to Appearance → Customizer → Additional CSS and paste the rule above.

Copy CSS rule

Option 2: Developer handoff

Pre-written message with class names, cascade context, and ancestor constraints.

Subject: Button color not applying — CSS conflict
The theme’s .entry-content a rule is overriding the
page builder color at specificity (0,1,1) vs (0,0,1).
Download capture file

Diagnosis included with the annual plan.

What changes

Every other CSS tool shows you what’s applied. Lens shows you what’s winning, what tried and lost, and what’s in the way of your specific change.

On your own With Lens
Shows CSS rules applying to the element
Shows every rule that lost and explains why it lost
Takes the specific property and value you’re trying to change as input, and shows what’s blocking it
Previews your target value on the live page before you diagnose anything
Identifies which rule came from which source (theme, plugin, page builder)
Reads the full ancestor chain above the element you clicked
Tells you what is causing the problem in real human terms
Generates a ready-to-paste CSS fix when confident
Works on any website in Chrome
Reads every CSS rule applying to the element
Shows every rule that lost and explains why it lost
Takes the property and value you’re trying to change and shows what’s blocking it
Previews your target value on the live page before you diagnose anything
Identifies which rule came from which source
Reads the full ancestor chain above the element
Tells you what is causing it in real human terms
Generates a ready-to-paste CSS fix when confident
Works on any website in Chrome
Not just WordPress

Loupely Lens works on any website in Chrome.

If you can open it in Chrome, Lens can read it. The CSS cascade works the same way on every site.

WordPress
Shopify
Webflow
Squarespace
Framer
Elementor
Divi
Wix
Custom builds
Any site in Chrome
Pricing

7 days free to diagnose. $49 a year after that.

The preview gives you a real answer about what’s overriding your change. The diagnosis gives you the fix. The 7-day trial starts on your first diagnosis, no card required. See full pricing →

No account needed
$0

Click any element. See every CSS property. Type a value and see it on the live page. Lens tells you whether your change would hold or whether something’s overriding it.

Join the waitlist
Start here 7-day free trial
Free for 7 days

Unlimited diagnoses for 7 days. No card required. Trial starts on your first diagnosis. After 7 days, $49/year for Lens Annual.

Join the waitlist
Lens Annual
$49/yr

Unlimited diagnoses on Loupely Lens for one year. Any website in Chrome.

Join the waitlist
One account. Both tools.

Click on what looks wrong.
See exactly what’s in the way.

Works on any website in Chrome. 7-day free trial, no card required. Unlimited diagnoses with the annual plan.