diff --git a/.changeset/hot-views-judge.md b/.changeset/hot-views-judge.md
new file mode 100644
index 0000000000..3840961001
--- /dev/null
+++ b/.changeset/hot-views-judge.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Add cover image background mode and masks
diff --git a/packages/gitbook/src/components/DocumentView/Heading.tsx b/packages/gitbook/src/components/DocumentView/Heading.tsx
index 68013e9ea0..0d41ea192a 100644
--- a/packages/gitbook/src/components/DocumentView/Heading.tsx
+++ b/packages/gitbook/src/components/DocumentView/Heading.tsx
@@ -53,6 +53,7 @@ export function Heading(props: BlockProps<DocumentBlockHeading>) {
                     'justify-self-start',
                     'max-w-full',
                     'break-words',
+                    'page-cover-background:text-contrast-cover',
                     getTextAlignment(block.data.align),
                     textStyle.lineHeight
                 )}
diff --git a/packages/gitbook/src/components/DocumentView/Paragraph.tsx b/packages/gitbook/src/components/DocumentView/Paragraph.tsx
index 9ba46fa59f..bb575893ea 100644
--- a/packages/gitbook/src/components/DocumentView/Paragraph.tsx
+++ b/packages/gitbook/src/components/DocumentView/Paragraph.tsx
@@ -14,7 +14,14 @@ export function Paragraph(props: BlockProps<DocumentBlockParagraph>) {
         'has-[.button,input]:flex has-[.button,input]:flex-wrap has-[.button,input]:gap-2 has-[.button,input]:items-center';
 
     return (
-        <p className={tcls(inlineButtonStyle, style, getTextAlignment(block.data?.align))}>
+        <p
+            className={tcls(
+                'page-cover-background:[&:not(:has(.button,input))]:text-contrast-cover',
+                inlineButtonStyle,
+                style,
+                getTextAlignment(block.data?.align)
+            )}
+        >
             <Inlines {...contextProps} nodes={block.nodes} ancestorInlines={[]} />
         </p>
     );
diff --git a/packages/gitbook/src/components/PageAside/PageAside.tsx b/packages/gitbook/src/components/PageAside/PageAside.tsx
index 2c12d3ba3b..e25258a640 100644
--- a/packages/gitbook/src/components/PageAside/PageAside.tsx
+++ b/packages/gitbook/src/components/PageAside/PageAside.tsx
@@ -95,9 +95,11 @@ export function PageAside(props: {
                 'page-api-block:page-has-outline:min-[96rem]:border-l-0',
                 'page-api-block:page-has-outline:min-[96rem]:pl-8',
 
-                'hydrated:site-background', // Only add a background once the element is positioned correctly to prevent overlapping the page cover
+                'layout-default:max-xl:site-background',
+                'layout-wide:max-3xl:site-background',
                 'text-tint',
-                'contrast-more:text-tint-strong'
+                'contrast-more:text-tint-strong',
+                'xl:page-cover-background:text-contrast-cover'
             )}
         >
             <div className="flex h-full w-full shrink-0 flex-col overflow-hidden">
diff --git a/packages/gitbook/src/components/PageAside/ScrollSectionsList.tsx b/packages/gitbook/src/components/PageAside/ScrollSectionsList.tsx
index eee74203bf..b61714cf9e 100644
--- a/packages/gitbook/src/components/PageAside/ScrollSectionsList.tsx
+++ b/packages/gitbook/src/components/PageAside/ScrollSectionsList.tsx
@@ -91,6 +91,7 @@ export function ScrollSectionsList({ sections }: { sections: DocumentSection[] }
                             'sidebar-list-line:border-l-2',
                             'border-transparent',
                             'sidebar-list-line:-left-px',
+                            'xl:page-cover-background:text-contrast-cover',
 
                             section.depth > 1 && [
                                 'subitem',
diff --git a/packages/gitbook/src/components/PageBody/PageBody.tsx b/packages/gitbook/src/components/PageBody/PageBody.tsx
index dd2056435f..ef402ef6cd 100644
--- a/packages/gitbook/src/components/PageBody/PageBody.tsx
+++ b/packages/gitbook/src/components/PageBody/PageBody.tsx
@@ -82,6 +82,7 @@ export function PageBody(props: {
                     'py-8',
                     'layout-wide:no-sidebar:lg:max-xl:pb-20', // Add padding to prevent overlap of minimised trademark
                     '@container',
+                    'flex flex-col',
                     CONTENT_STYLE,
                     pageHasToc ? 'page-has-toc' : 'page-no-toc',
                     wideLayout ? 'layout-wide' : 'layout-default'
@@ -106,7 +107,7 @@ export function PageBody(props: {
                         <SuspenseLoadedHint />
                         <DocumentView
                             document={document}
-                            style="clear-both flex flex-col [&>*+*]:mt-5"
+                            style="clear-both flex grow flex-col [&>*+*]:mt-5"
                             context={{
                                 mode: 'default',
                                 contentContext: {
diff --git a/packages/gitbook/src/components/PageBody/PageCover.tsx b/packages/gitbook/src/components/PageBody/PageCover.tsx
index 7e14b125ab..b658fba411 100644
--- a/packages/gitbook/src/components/PageBody/PageCover.tsx
+++ b/packages/gitbook/src/components/PageBody/PageCover.tsx
@@ -1,5 +1,9 @@
 import type { GitBookSiteContext } from '@/lib/context';
-import type { RevisionPageDocument, RevisionPageDocumentCover } from '@gitbook/api';
+import {
+    CustomizationHeaderPreset,
+    type RevisionPageDocument,
+    type RevisionPageDocumentCover,
+} from '@gitbook/api';
 import type { StaticImageData } from 'next/image';
 
 import { getImageAttributes } from '@/components/utils';
@@ -13,19 +17,40 @@ import { getCoverHeight } from './coverHeight';
 import defaultPageCoverSVG from './default-page-cover.svg';
 
 const defaultPageCover = defaultPageCoverSVG as StaticImageData;
+const DEFAULT_RESPONSIVE_COVER_CUTOFF = '56.25%';
 
 /**
  * Cover for the page.
  */
 export async function PageCover(props: {
-    as: 'hero' | 'full';
+    as: 'hero' | 'full' | 'background';
     page: RevisionPageDocument;
     cover: RevisionPageDocumentCover;
     context: GitBookSiteContext;
 }) {
-    const { as, cover, context } = props;
+    let { as, cover, context } = props;
     const height = getCoverHeight(cover);
 
+    const initialCoverCutoff = () => {
+        if (!height) {
+            return DEFAULT_RESPONSIVE_COVER_CUTOFF;
+        }
+
+        let total = height;
+        if (context.customization.announcement?.enabled) {
+            total += 68;
+        }
+        if (context.customization.header.preset !== CustomizationHeaderPreset.None) {
+            total += 64;
+        }
+        if (context.visibleSections && context.visibleSections.list.length > 1) {
+            total += 45;
+        }
+        return `${total}px`;
+    };
+
+    as = 'background';
+
     const [resolved, resolvedDark] = await Promise.all([
         cover.ref ? resolveContentRef(cover.ref, context) : null,
         cover.refDark ? resolveContentRef(cover.refDark, context) : null,
@@ -79,56 +104,71 @@ export async function PageCover(props: {
     assert(light, 'Light image should be defined');
 
     return (
-        <div
-            data-gb-page-cover
-            data-full={String(as === 'full')}
-            className={tcls(
-                'overflow-hidden',
-                // Negative margin to balance the container padding
-                '-mx-4',
-
-                // Full-width cover: extend to edges, disregard TOC where possible
-                as === 'full'
-                    ? [
-                          'sm:-mx-6',
-                          'md:-mx-8',
-                          'lg:-ml-12',
-
-                          // Extend the full-width cover
-                          'layout-default:page-no-toc:lg:-ml-92', // Extend into the left sidebar if there's no TOC...
-                          'layout-wide:2xl:-mr-[clamp(2rem,calc((100vw-90rem)/2+2rem),18rem)]', // ...and to the right if there's no outline.
-                          'layout-wide:page-no-toc:2xl:-mx-[max(calc((100vw-90rem)/2+2rem),2rem)]', // Span full width if the page content is centered.
-                          'layout-wide:has-sidebar:page-no-toc:lg:-ml-[max(calc((100vw-90rem)/2+23rem),23rem)]', // If there's still a sidebar, we have to factor it in too.
-
-                          // Corner rounding: we round once the page is wide enough to have space around the cover.
-                          'layout-default:2xl:rounded-corners:rounded-b-xl',
-                          'layout-default:2xl:circular-corners:rounded-b-3xl',
-                          'layout-wide:3xl:circular-corners:rounded-b-3xl',
-                          'layout-wide:3xl:rounded-corners:rounded-b-xl',
-                          // Round the bottom left corner once the sidebar is shown next to it
-                          'has-sidebar:lg:rounded-corners:rounded-bl-xl',
-                          'has-sidebar:lg:circular-corners:rounded-bl-3xl',
-                      ]
-                    : [
-                          // Regular cover: size regularly along with other content
-                          CONTENT_STYLE,
-                          'max-sm:-mx-4',
-                          'sm:rounded-corners:rounded-xl',
-                          'sm:circular-corners:rounded-3xl',
-                          'mb-8',
-                          'max-sm:w-screen',
-                          'max-sm:-mt-8',
-                      ]
-            )}
-        >
-            <PageCoverImage
-                imgs={{
-                    light,
-                    dark,
-                }}
-                y={cover.yPos}
-                height={height}
-            />
-        </div>
+        <>
+            <style>{`:root { --cover-height: ${initialCoverCutoff()}; }`}</style>
+            <div
+                data-gb-page-cover
+                // data-cover-text-color={white or black} TODO: Retrieve from API for light & dark mode
+                data-cover-type={as}
+                data-full={String(as === 'full')}
+                className={tcls(
+                    'overflow-hidden',
+                    // Negative margin to balance the container padding
+                    '-mx-4',
+
+                    // Full-width cover: extend to edges, disregard TOC where possible
+                    as === 'full' || as === 'background'
+                        ? [
+                              'sm:-mx-6',
+                              'md:-mx-8',
+                              'lg:-ml-12',
+
+                              // Extend the full-width cover
+                              'layout-default:page-no-toc:lg:-ml-92', // Extend into the left sidebar if there's no TOC...
+                              'layout-wide:2xl:-mr-[clamp(2rem,calc((100vw-90rem)/2+2rem),18rem)]', // ...and to the right if there's no outline.
+                              'layout-wide:page-no-toc:2xl:-mx-[max(calc((100vw-90rem)/2+2rem),2rem)]', // Span full width if the page content is centered.
+                              'layout-wide:has-sidebar:page-no-toc:lg:-ml-[max(calc((100vw-90rem)/2+23rem),23rem)]', // If there's still a sidebar, we have to factor it in too.
+
+                              // Corner rounding: we round once the page is wide enough to have space around the cover.
+                              'layout-default:2xl:rounded-corners:rounded-b-xl',
+                              'layout-default:2xl:circular-corners:rounded-b-3xl',
+                              'layout-wide:3xl:circular-corners:rounded-b-3xl',
+                              'layout-wide:3xl:rounded-corners:rounded-b-xl',
+                              // Round the bottom left corner once the sidebar is shown next to it
+                              'has-sidebar:lg:rounded-corners:rounded-bl-xl',
+                              'has-sidebar:lg:circular-corners:rounded-bl-3xl',
+                          ]
+                        : null,
+
+                    as === 'hero'
+                        ? [
+                              // Regular cover: size regularly along with other content
+                              CONTENT_STYLE,
+                              'max-sm:-mx-4',
+                              'sm:rounded-corners:rounded-xl',
+                              'sm:circular-corners:rounded-3xl',
+                              'mb-8',
+                              'max-sm:w-screen',
+                              'max-sm:-mt-8',
+                          ]
+                        : null,
+
+                    as === 'background'
+                        ? [
+                              '-z-1 absolute inset-x-0 contrast-more:opacity-5 *:contrast-more:blur-md',
+                          ]
+                        : null
+                )}
+            >
+                <PageCoverImage
+                    imgs={{
+                        light,
+                        dark,
+                    }}
+                    y={cover.yPos}
+                    height={height}
+                />
+            </div>
+        </>
     );
 }
diff --git a/packages/gitbook/src/components/PageBody/PageCoverImage.tsx b/packages/gitbook/src/components/PageBody/PageCoverImage.tsx
index eb2190b744..ae2d18c4bf 100644
--- a/packages/gitbook/src/components/PageBody/PageCoverImage.tsx
+++ b/packages/gitbook/src/components/PageBody/PageCoverImage.tsx
@@ -24,10 +24,11 @@ interface PageCoverImageProps {
     y: number;
     // Only if the `height` was customized by the user (and thus defined), we use it to set the cover's height and skip the default behaviour of fixed aspect-ratio.
     height: number | undefined;
+    mask?: 'none' | 'radial';
 }
 
 export function PageCoverImage(props: PageCoverImageProps) {
-    const { imgs, y, height } = props;
+    const { imgs, y, height, mask } = props;
     const { containerRef, objectPositionY, isLoading } = useCoverPosition(imgs, y);
 
     if (isLoading) {
@@ -53,6 +54,11 @@ export function PageCoverImage(props: PageCoverImageProps) {
                         : `${PAGE_COVER_SIZE.width}/${PAGE_COVER_SIZE.height}`,
                     objectPosition: `50% ${objectPositionY}%`,
                     height, // if no height is passed, no height will be set.
+                    maskComposite: 'intersect',
+                    maskImage:
+                        mask === 'radial'
+                            ? 'radial-gradient(200% 200% at 50% -100%, black 70%, rgba(0,0,0,0.85) 77.5%, rgba(0,0,0,0.6) 85%, rgba(0,0,0,0.1) 96.25%, transparent 100%), linear-gradient(to left, black 60%, rgba(0,0,0,0.8) 75%, rgba(0,0,0,0.1) 95%, transparent 100%), linear-gradient(to right, black 60%, rgba(0,0,0,0.8) 75%, rgba(0,0,0,0.1) 95%, transparent 100%)'
+                            : undefined,
                 }}
             />
             {imgs.dark && (
@@ -69,6 +75,11 @@ export function PageCoverImage(props: PageCoverImageProps) {
                             : `${PAGE_COVER_SIZE.width}/${PAGE_COVER_SIZE.height}`,
                         objectPosition: `50% ${objectPositionY}%`,
                         height, // if no height is passed, no height will be set.
+                        maskComposite: 'intersect',
+                        maskImage:
+                            mask === 'radial'
+                                ? 'radial-gradient(200% 200% at 50% -100%, black 70%, rgba(0,0,0,0.85) 77.5%, rgba(0,0,0,0.6) 85%, rgba(0,0,0,0.1) 96.25%, transparent 100%), linear-gradient(to left, black 60%, rgba(0,0,0,0.8) 75%, rgba(0,0,0,0.1) 95%, transparent 100%), linear-gradient(to right, black 60%, rgba(0,0,0,0.8) 75%, rgba(0,0,0,0.1) 95%, transparent 100%)'
+                                : undefined,
                     }}
                 />
             )}
diff --git a/packages/gitbook/src/components/PageBody/PageHeader.tsx b/packages/gitbook/src/components/PageBody/PageHeader.tsx
index 8c2cdfde6c..351d3c8a2e 100644
--- a/packages/gitbook/src/components/PageBody/PageHeader.tsx
+++ b/packages/gitbook/src/components/PageBody/PageHeader.tsx
@@ -58,7 +58,10 @@ export async function PageHeader(props: {
             </div>
 
             {hasAncestors && (
-                <nav aria-label="Breadcrumb" className="text-tint leading-snug">
+                <nav
+                    aria-label="Breadcrumb"
+                    className="page-cover-background:text-contrast-cover text-tint leading-snug page-cover-background:opacity-9"
+                >
                     <ol className="inline">
                         {ancestors.map((breadcrumb, index) => {
                             const href = linker.toPathForPage({
@@ -116,7 +119,8 @@ export async function PageHeader(props: {
                         'grow',
                         'text-pretty',
                         'clear-right',
-                        'xs:clear-none'
+                        'xs:clear-none',
+                        'page-cover-background:text-contrast-cover'
                     )}
                 >
                     <PageIcon page={page} style={['text-tint-subtle ', 'shrink-0']} />
@@ -124,7 +128,15 @@ export async function PageHeader(props: {
                 </h1>
             ) : null}
             {page.description && page.layout.description ? (
-                <p className={tcls(CONTENT_STYLE_REDUCED, 'text-lg', 'text-tint', 'clear-both')}>
+                <p
+                    className={tcls(
+                        CONTENT_STYLE_REDUCED,
+                        'text-lg',
+                        'page-cover-background:text-contrast-cover',
+                        'text-tint contrast-more:text-tint-strong',
+                        'clear-both'
+                    )}
+                >
                     {page.description}
                 </p>
             ) : null}
diff --git a/packages/gitbook/src/components/RootLayout/globals.css b/packages/gitbook/src/components/RootLayout/globals.css
index de9409c775..8b7b4e6896 100644
--- a/packages/gitbook/src/components/RootLayout/globals.css
+++ b/packages/gitbook/src/components/RootLayout/globals.css
@@ -199,6 +199,18 @@
         @apply leading-relaxed;
         interpolate-size: allow-keywords; /* Opt-in for modern browsers to interpolate "auto" values in transitions/animations. */
         overflow-x: hidden; /* We never want horizontal scroll of the whole page, it looks buggy and we should never have overflow anyway */
+        --cover-height: 0px;
+        --cover-text-top: rgb(var(--tint-12));
+        --cover-text-bottom: rgb(var(--tint-12));
+    }
+
+    :root:not(.dark):has(
+            [data-gb-page-cover][data-cover-type="background"][data-cover-text-color="white"]
+        ),
+    :root.dark:has(
+            [data-gb-page-cover][data-cover-type="background"][data-cover-text-color="black"]
+        ) {
+        --cover-text-top: rgb(var(--contrast-tint-12));
     }
     
     /* Modern browsers with `scrollbar-*` support */
@@ -282,6 +294,43 @@
     }
 }
 
+@utility contrast-cover {
+    background-clip: border-box;
+    background-image: linear-gradient(
+        to bottom,
+        var(--cover-text-top) 0,
+        var(--cover-text-top) var(--cover-height),
+        var(--cover-text-bottom) var(--cover-height),
+        var(--cover-text-bottom) 100vh
+    );
+    background-repeat: no-repeat;
+    background-size: 100% 100vh;
+    background-attachment: fixed;
+}
+
+@utility text-contrast-cover {
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(
+        to bottom,
+        var(--cover-text-top) 0,
+        var(--cover-text-top) var(--cover-height),
+        var(--cover-text-bottom) var(--cover-height),
+        var(--cover-text-bottom) 100vh
+    );
+    background-repeat: no-repeat;
+    background-size: 100% 100vh;
+    background-attachment: fixed;
+    background-clip: text;
+    -webkit-background-clip: text;
+    
+    @media (prefers-contrast: more) {
+        color: var(--cover-text-bottom);
+        -webkit-text-fill-color: var(--cover-text-bottom);
+        background-image: none;
+    }
+}
+
 html {
     color-scheme: light;
 
diff --git a/packages/gitbook/src/components/SitePage/PageClientLayout.tsx b/packages/gitbook/src/components/SitePage/PageClientLayout.tsx
index 9b9ed2e597..dcee05a1e3 100644
--- a/packages/gitbook/src/components/SitePage/PageClientLayout.tsx
+++ b/packages/gitbook/src/components/SitePage/PageClientLayout.tsx
@@ -24,6 +24,7 @@ export function PageClientLayout({
     useRegisterPageMetadata({ pageMetaLinks });
 
     useStripFallbackQueryParam();
+    useSetCoverHeight();
     return null;
 }
 
@@ -60,3 +61,70 @@ function useRegisterPageMetadata(metadata: {
         currentPageMetadataStore.setState({ metaLinks: pageMetaLinks });
     }, [pageMetaLinks]);
 }
+
+/**
+ * Expose the visible bottom edge of the page cover as a viewport-relative CSS variable.
+ */
+function useSetCoverHeight() {
+    React.useEffect(() => {
+        const root = document.documentElement;
+        let animationFrame: number | null = null;
+
+        const updateCoverHeight = () => {
+            const pageCover = document.querySelector<HTMLElement>('[data-gb-page-cover]');
+            const isBackgroundCover = pageCover?.dataset.coverType === 'background';
+
+            if (!isBackgroundCover) {
+                root.style.setProperty('--cover-height', '0px');
+                return;
+            }
+
+            if (!pageCover) {
+                return;
+            }
+
+            const bottom = pageCover.getBoundingClientRect().bottom;
+            const height = Math.max(Math.min(bottom, window.innerHeight), 0);
+
+            root.style.setProperty('--cover-height', `${height}px`);
+        };
+
+        const scheduleUpdate = () => {
+            if (animationFrame !== null) {
+                return;
+            }
+
+            animationFrame = requestAnimationFrame(() => {
+                animationFrame = null;
+                updateCoverHeight();
+            });
+        };
+
+        scheduleUpdate();
+
+        window.addEventListener('scroll', scheduleUpdate, { passive: true });
+        window.addEventListener('resize', scheduleUpdate, { passive: true });
+
+        const pageCover = document.querySelector<HTMLElement>('[data-gb-page-cover]');
+        const resizeObserver =
+            pageCover && typeof ResizeObserver !== 'undefined'
+                ? new ResizeObserver(() => {
+                      scheduleUpdate();
+                  })
+                : null;
+
+        if (pageCover && resizeObserver) {
+            resizeObserver.observe(pageCover);
+        }
+
+        return () => {
+            if (animationFrame !== null) {
+                cancelAnimationFrame(animationFrame);
+            }
+
+            resizeObserver?.disconnect();
+            window.removeEventListener('scroll', scheduleUpdate);
+            window.removeEventListener('resize', scheduleUpdate);
+        };
+    }, []);
+}
diff --git a/packages/gitbook/src/components/SitePage/SitePage.tsx b/packages/gitbook/src/components/SitePage/SitePage.tsx
index 2284b1fce8..5bb0d889b8 100644
--- a/packages/gitbook/src/components/SitePage/SitePage.tsx
+++ b/packages/gitbook/src/components/SitePage/SitePage.tsx
@@ -72,7 +72,11 @@ export async function SitePage(props: SitePageProps & { staticRoute: boolean })
         <PageContextProvider pageId={page.id} spaceId={context.space.id} title={page.title}>
             {/* Using `contents` makes the children of this div according to its parent — which keeps them in a single flex row with the TOC by default.
             If there's a page cover, we use `flex flex-col` to lay out the PageCover above the PageBody + PageAside instead. */}
-            <div className={withFullPageCover && page.cover ? 'flex grow flex-col' : 'contents'}>
+            <div
+                className={
+                    withFullPageCover && page.cover ? 'relative flex grow flex-col' : 'contents'
+                }
+            >
                 {withFullPageCover && page.cover ? (
                     <PageCover as="full" page={page} cover={page.cover} context={context} />
                 ) : null}
diff --git a/packages/gitbook/src/components/primitives/Button.tsx b/packages/gitbook/src/components/primitives/Button.tsx
index 940a940bfc..930bb962e3 100644
--- a/packages/gitbook/src/components/primitives/Button.tsx
+++ b/packages/gitbook/src/components/primitives/Button.tsx
@@ -58,7 +58,7 @@ export const variantClasses = {
     ],
     secondary: [
         'bg-tint',
-        'depth-flat:bg-transparent',
+        'depth-flat:bg-tint-base',
         'text-tint',
         'hover:bg-tint-hover',
         'hover:not-disabled:depth-flat:bg-tint-hover',
diff --git a/packages/gitbook/tailwind.config.ts b/packages/gitbook/tailwind.config.ts
index 57528cf6b6..6cf8691e6a 100644
--- a/packages/gitbook/tailwind.config.ts
+++ b/packages/gitbook/tailwind.config.ts
@@ -739,6 +739,14 @@ const config: Config = {
              */
             addVariant('page-api-block', 'body:has(.openapi-block) &');
 
+            /**
+             * Variant for the page cover type
+             */
+            addVariant(
+                'page-cover-background',
+                'body:has([data-gb-page-cover][data-cover-type="background"]) &'
+            );
+
             /**
              * Variant when the page is displayed in print mode.
              */