Remove soft paywalls with CSS and JavaScript
Some paywalls send you the whole article, then hide it behind a gray overlay and lock the page so you cannot scroll. The text is already in your browser — you just cannot read it. This article shows how to remove that overlay with CSS and JavaScript. First, an important distinction, and an honest note about ethics.
Soft paywall vs hard paywall
This matters, so read it before anything else.
- A soft paywall sends the full article HTML to your browser and then hides it: an overlay, a scroll lock, a blur, a
max-heightclamp. The content is in the DOM. You can confirm this in DevTools — open the Elements panel and search for a paragraph of the article; if it is there, the paywall is soft. - A hard paywall never sends the body at all. The server checks your subscription and only then returns the text. The DOM contains a teaser and nothing else. No CSS or JavaScript can conjure content that was never delivered.
This article is only about soft paywalls — restoring the visibility of text already sitting in your browser. You cannot bypass a hard paywall, and you should not try.
An honest note on ethics and law
Quality journalism costs money to produce. A soft paywall is a publisher's bet that nagging works better than blocking. Restyling a page in your own browser is legal — the same right that lets ad blockers and Reader Mode exist — but legality is not the whole story.
Be a decent reader: if you rely on a publication, subscribe to it. Use these techniques for the occasional one-off article, for accessibility, or to read something a friend sent you — not as a way to never pay for news again. Newsrooms you defund eventually close.
Finding what is hiding the article
Open DevTools, Elements panel. Soft paywalls use a small set of tricks, usually in combination:
- A fixed-position
divwith a highz-indexcovering the article — the overlay. overflow: hiddenorposition: fixedon<body>— the scroll lock.- A
filter: blur()on the lower paragraphs. - A
max-heightplusoverflow: hiddenon the article container — the fade-out clamp.
Click around the overlay element and read its computed styles. Note the class names — you will target them next.
Removing the overlay
The overlay is a separate element layered on top. Hide it with CSS:
/* Common paywall overlay class and ID patterns */
.paywall,
.paywall-overlay,
.subscription-wall,
.piano-overlay,
.tp-modal,
.tp-backdrop,
[class*="paywall" i],
[class*="metering" i],
[id*="paywall" i] {
display: none !important;
}Use the i flag for case-insensitive attribute matching, exactly as you would for cookie banners. Start broad, then tighten to specific classes if you over-match something.
Unlocking body scroll
Hiding the overlay does nothing if the page is still frozen. Soft paywalls lock scrolling so you cannot reach the hidden text. Force it back:
/* Restore normal scrolling */
html, body {
overflow: auto !important;
position: static !important;
height: auto !important;
}If a script keeps re-applying the lock, a tiny JS rule beats it by clearing the inline style on a loop:
// Re-assert scrolling against a script that keeps locking it
setInterval(() => {
document.documentElement.style.overflow = 'auto';
document.body.style.overflow = 'auto';
document.body.style.position = 'static';
}, 400);Un-blurring the text
Many paywalls leave the first two paragraphs sharp and blur the rest as a teaser. The text is fully there — it is just out of focus. Remove the filter:
/* Kill the blur teaser */
.article-body,
.article-content,
[class*="blur" i],
[class*="fade" i] {
filter: none !important;
-webkit-filter: none !important;
}If the blur sits on a specific child, inspect it and target that exact class — a blanket * { filter: none } can break legitimate effects elsewhere on the page.
Removing the max-height clamp
The other classic teaser: the article container has a max-height and overflow: hidden, so you see the top and a gradient fade-out. Lift the clamp:
/* Unclamp the article so the full text shows */
.article-body,
.post-content,
[class*="article" i][class*="clamp" i],
[class*="gated" i] {
max-height: none !important;
overflow: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
/* Remove the gradient fade element if it is a separate node */
.content-fade,
[class*="gradient-fade" i] {
display: none !important;
}Putting it together as one rule
Each publisher uses a slightly different mix. The efficient approach with JustZix is one rule per site, scoped tightly:
- Create a rule with the URL pattern
https://news.example.com/*. - Paste the overlay, scroll-unlock, un-blur and unclamp CSS into the CSS tab.
- Add the scroll-unlock JS only if a script keeps re-locking the page.
- Keep these rules in a folder named "Reader" so you can review and disable them as a group.
Because the rule is scoped to one domain, it will never affect a site where you would rather just subscribe.
See also
- Disable dark patterns and fake urgency — same skills, applied to manipulative UI.
- A custom print stylesheet for better PDFs — clean up an article before saving it.
- JustZix use cases for more reading-focused rules.
For the occasional article hidden behind a soft overlay, install JustZix and write one scoped rule. And if you read a publication often — pay for it. That is what keeps the articles coming.
Rate this post
No ratings yet — be the first.