diff --git a/src/shared-ui/world-background-style.ts b/src/shared-ui/world-background-style.ts
index e88f7f48..aba86ea0 100644
--- a/src/shared-ui/world-background-style.ts
+++ b/src/shared-ui/world-background-style.ts
@@ -2,7 +2,16 @@ import type { CSSProperties } from "react";
 
 import type { WorldBackgroundSettings } from "../document/world-settings";
 
-export function createWorldBackgroundStyle(background: WorldBackgroundSettings, imageUrl: string | null = null): CSSProperties {
+export function createWorldBackgroundStyle(
+  background: WorldBackgroundSettings,
+  imageUrl: string | null = null,
+  shaderPreview:
+    | {
+        topColorHex: string;
+        bottomColorHex: string;
+      }
+    | null = null
+): CSSProperties {
   if (background.mode === "solid") {
     return {
       backgroundColor: background.colorHex,
@@ -10,6 +19,17 @@ export function createWorldBackgroundStyle(background: WorldBackgroundSettings,
     };
   }
 
+  if (background.mode === "shader") {
+    return {
+      backgroundColor: shaderPreview?.bottomColorHex ?? "#8cbef6",
+      backgroundImage: `linear-gradient(180deg, ${
+        shaderPreview?.topColorHex ?? "#5f8fd3"
+      } 0%, ${
+        shaderPreview?.bottomColorHex ?? "#d8eeff"
+      } 100%)`
+    };
+  }
+
   if (background.mode === "image") {
     return {
       backgroundColor: "#0d1116",