diff --git a/apps/client/src/widgets/collections/presentation/index.tsx b/apps/client/src/widgets/collections/presentation/index.tsx
index d9fabff10..119d4e7b0 100644
--- a/apps/client/src/widgets/collections/presentation/index.tsx
+++ b/apps/client/src/widgets/collections/presentation/index.tsx
@@ -178,6 +178,7 @@ function Slide({ slide }: { slide: PresentationSlideBaseModel }) {
         <section
             data-note-id={slide.noteId}
             data-background-color={slide.backgroundColor}
+            data-background-gradient={slide.backgroundGradient}
             dangerouslySetInnerHTML={slide.content}
         />
     );
diff --git a/apps/client/src/widgets/collections/presentation/model.ts b/apps/client/src/widgets/collections/presentation/model.ts
index b0b4aa12c..a0a125975 100644
--- a/apps/client/src/widgets/collections/presentation/model.ts
+++ b/apps/client/src/widgets/collections/presentation/model.ts
@@ -13,6 +13,7 @@ export interface PresentationSlideBaseModel {
     noteId: string;
     content: DangerouslySetInnerHTML;
     backgroundColor?: string;
+    backgroundGradient?: string;
 }
 
 export interface PresentationModel {
@@ -39,10 +40,14 @@ async function buildVerticalSlides(parentSlideNote: FNote): Promise<undefined |
 }
 
 async function buildSlideModel(note: FNote): Promise<PresentationSlideBaseModel> {
+    const slideBackground = note.getLabelValue("slide:background") ?? undefined;
+    const isGradient = slideBackground?.includes("gradient(");
+
     return {
         noteId: note.noteId,
         content: await processContent(note),
-        backgroundColor: note.getLabelValue("slide:background") ?? undefined
+        backgroundColor: !isGradient ? slideBackground : undefined,
+        backgroundGradient: isGradient ? slideBackground : undefined
     }
 }