Fade out the last visible paragraph on access-restricted posts

[bst1n]

Problem

When a visitor lands on an access-restricted post (members-only, paid, tiers), Ghost truncates the content and renders a CTA below it. Currently the truncated paragraph ends abruptly with no visual signal that more content is hidden.

Solution

A single CSS rule that fades out the last visible paragraph via a mask gradient, scoped strictly to restricted posts (those that contain a .gh-post-upgrade-cta element) using the :has() selector.

.gh-content:has(> .gh-post-upgrade-cta) > p:last-of-type {
    -webkit-mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
    mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
}

Why this approach

• Pure CSS, no HTML changes. No new partial, no wrapper div, no JavaScript.
• Strictly scoped. Regular posts are completely unaffected — the rule only matches when a .gh-post-upgrade-cta exists as a direct child of .gh-content.
• Common UX pattern. Medium, Substack, the NYT, etc. all do this. It's become a de-facto standard cue that signals "there's more content behind this paywall".

Browser support

Uses CSS :has() and mask-image. Both are supported in all major browsers since 2023:

• :has(): Chrome 105+, Safari 15.4+, Firefox 121+
• mask-image: universal

Overall browser support in late 2026 is ~98%. Visitors on older browsers see the truncated content normally — graceful degradation, no broken layout.

Opt-out

Theme overriders or end users who don't want this effect can disable it with:

.gh-content > p:last-of-type {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

Replaces previous attempt

This PR was previously a partial-based implementation with several issues (broken file extension, duplicated content, malformed HTML, no i18n). It has been rewritten with the much cleaner CSS-only approach above.

[coderabbitai]

Walkthrough

Added a CSS rule that targets the last paragraph of content blocks containing an upgrade CTA element. The rule applies a linear gradient mask that fades the paragraph out from bottom to top, creating a visual indicator of truncated content for access-restricted previews. Both vendor-prefixed (-webkit-mask-image) and standard (mask-image) properties are included for cross-browser compatibility.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly and clearly describes the main change: adding a fade-out effect to the last paragraph on access-restricted posts, which matches the CSS rule addition in the changeset.
Description check	✅ Passed	The description is directly related to the changeset, providing context about the problem, solution, browser support, and implementation details for the CSS fade-out effect on restricted posts.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@assets/css/screen.css`:
- Around line 2274-2275: The mask gradient on the paragraph is starting at 1%
which fades almost the entire block; update the mask declarations
(-webkit-mask-image and mask-image) to begin the opaque region much lower (e.g.,
change the first color stop from 1% to around 50–70%) so the majority of the
paragraph remains fully readable while only the final portion fades to
transparent; locate the two properties in the CSS and adjust the first stop
percentage to ~60% (or your desired 50–70% value).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 728c61f5-2f07-4a8c-b288-4d11a32b5ef2

📥 Commits

Reviewing files that changed from the base of the PR and between 038f9d6 and cb33a42.

⛔ Files ignored due to path filters (1)

• assets/built/screen.css.map is excluded by !**/*.map

📒 Files selected for processing (2)

• assets/built/screen.css
• assets/css/screen.css

[coderabbitai]

⚠️ Potential issue | 🟠 Major | ⚖️ Poor tradeoff

The gradient starts too early, potentially making most of the paragraph unreadable.

The gradient begins at 1% opacity, meaning 99% of the paragraph's height will fade from opaque to transparent. For a typical paragraph of 5-10 lines, most of the text will be partially transparent or invisible, severely impacting readability. Consider starting the fade at a higher percentage (e.g., 50-70%) to keep more of the paragraph legible while still providing the visual cue that content continues.

🎨 Suggested gradient adjustment

-.gh-content:has(> .gh-post-upgrade-cta) > p:last-of-type {
-    -webkit-mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
-    mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
-}
+.gh-content:has(> .gh-post-upgrade-cta) > p:last-of-type {
+    -webkit-mask-image: linear-gradient(to bottom, var(--color-black) 60%, transparent 100%);
+    mask-image: linear-gradient(to bottom, var(--color-black) 60%, transparent 100%);
+}

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	-webkit-mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
	mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, var(--color-black) 60%, transparent 100%);
	mask-image: linear-gradient(to bottom, var(--color-black) 60%, transparent 100%);

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@assets/css/screen.css` around lines 2274 - 2275, The mask gradient on the
paragraph is starting at 1% which fades almost the entire block; update the mask
declarations (-webkit-mask-image and mask-image) to begin the opaque region much
lower (e.g., change the first color stop from 1% to around 50–70%) so the
majority of the paragraph remains fully readable while only the final portion
fades to transparent; locate the two properties in the CSS and adjust the first
stop percentage to ~60% (or your desired 50–70% value).