Paywall
付费墙
Aliases:付费墙收费墙会员墙订阅墙看一半要钱paywallupgrade wallsubscription gate
What is it
Blocks content or features once a threshold is reached, requiring payment or subscription to continue. It can hard-cut, meter by count, or tease with previews and an upgrade nudge. It joins value demonstration to the pay decision — show what is gained first, then ask for payment.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Content or features carry clear paid value and the free slice demos well
- Subscription products nudging an upgrade at a natural peak
- Meterable usage — articles, calls, seats — suits a counted limit
✕ When not to use
- Too little free content to judge value before being blocked
- One-time-purchase tools gated behind a subscription — wrong expectation
- Docs, legal terms and other content that must stay open
Variants
Hard wall
硬性截断
Cut off at the line — nothing beyond without paying
Metered limit
计量限制
A free quota of articles/uses, with a usage hint before the cut
Upgrade teaser
升级提示
Blurred preview plus an upgrade button — a soft nudge
Implementation
mask-imagebackdrop-filtergradientpositionRender the first paragraphs normally, then fade the cut with a gradient mask or mask-image and overlay the CTA. Track the meter in localStorage or on the server and warn near the limit. The server must still block unpaid requests — the front-end mask is only the experience layer. Scale enter transitions by var(--demo-speed, 1) and respect prefers-reduced-motion.
Related concepts
Layer the information: show only the most common and necessary parts first, hiding secondary details behind "expand", "next step" or "show more" until the user asks for them. It solves the problem of overwhelming users at once — the initial cognitive load stays low and the surface easy to learn, while depth remains available on demand for advanced users.
PatternsUsed withA commercial page that makes the offer legible: it opens with a headline and billing-period toggle, the body is a row of tier cards (price, feature list, action button) with the recommended tier visually emphasized, and a comparison table plus FAQ resolve remaining doubts. The order is fixed — pick a period, pick a tier, remove hesitation.
PagesUsed withThe conversion page turning strangers into accounts: the form keeps only the fields needed to start (email + password) and defers everything else into the product, supported by third-party signup, a password strength hint and terms consent. It shares a layout skeleton with the login page, but every design decision answers "is signing up worth it and painless?"
PagesUsed withWhen a list or page has no data, don't leave a void — fill it with an illustration, one sentence of explanation and a clear next action. It solves the "blank screen" problem where users can't tell what happened or what to do next, turning dead space into a starting point: onboarding for first use, a way out for fruitless searches.
PatternsSimilar