magicuidesign · Yeom-JinHo · Mar 28, 2026 · Mar 27, 2026 · Mar 28, 2026 · Mar 28, 2026
diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts
@@ -609,6 +609,12 @@ export const docsConfig: DocsConfig = {
           items: [],
           label: "",
         },
+        {
+          title: "Backlight",
+          href: `/docs/components/backlight`,
+          items: [],
+          label: "New",
+        },
       ],
     },
   ],

diff --git a/apps/www/content/docs/components/backlight.mdx b/apps/www/content/docs/components/backlight.mdx
@@ -0,0 +1,75 @@
+---
+title: Backlight
+date: 2026-03-27
+description: A backlight glow effect for videos, images, and SVGs.
+author: abdmjd1
+published: true
+---
+
+<ComponentPreview name="backlight-video-demo" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add @magicui/backlight
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="backlight" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Examples
+
+### Image
+
+<ComponentPreview name="backlight-image-demo" />
+
+### SVG
+
+<ComponentPreview name="backlight-svg-demo" />
+
+## Usage
+
+```tsx showLineNumbers
+import { Backlight } from "@/components/ui/backlight"
+```
+
+```tsx showLineNumbers
+<Backlight>
+  <img src="https://some-url/image.png" />
+</Backlight>
+```
+
+## Props
+
+| Prop        | Type                 | Default | Description                                                        |
+| ----------- | -------------------- | ------- | ------------------------------------------------------------------ |
+| `blur`      | `number`             | `20`    | The blur intensity of the backlight glow effect.                   |
+| `children`  | `React.ReactElement` | `-`     | The video, image, or SVG element to apply the backlight effect to. |
+| `className` | `string`             | `-`     | Additional class names for the wrapper div.                        |
+
+## Credits
+
+- Credit to [@abdmjd1](https://github.com/abdmjd1)
diff --git a/apps/www/public/llms-full.txt b/apps/www/public/llms-full.txt
@@ -3436,6 +3436,188 @@ export default function AvatarCirclesDemo() {
 
 
 
+===== COMPONENT: backlight =====
+Title: Backlight
+Description: A backlight glow effect for videos, images, and SVGs.
+
+--- file: magicui/backlight.tsx ---
+import { useId, type ReactElement } from "react"
+
+type BacklightProps = {
+  children?: ReactElement
+  className?: string
+  blur?: number
+}
+
+export function Backlight({ blur = 20, children, className }: BacklightProps) {
+  const id = useId()
+
+  return (
+    <div className={className}>
+      <svg width="0" height="0" aria-hidden="true">
+        <filter id={id} y="-50%" x="-50%" width="200%" height="200%">
+          <feGaussianBlur
+            in="SourceGraphic"
+            stdDeviation={blur}
+            result="blurred"
+          ></feGaussianBlur>
+          <feColorMatrix
+            type="saturate"
+            in="blurred"
+            values="4"
+          ></feColorMatrix>
+          <feComposite in="SourceGraphic" operator="over"></feComposite>
+        </filter>
+      </svg>
+
+      <div style={{ filter: `url(#${id})` }}>{children}</div>
+    </div>
+  )
+}
+
+
+===== EXAMPLE: backlight-video-demo =====
+Title: backlight-video-demo
+
+--- file: example/backlight-video-demo.tsx ---
+import { Backlight } from "@/registry/magicui/backlight"
+
+export default function BacklightVideoDemo() {
+  return (
+    <Backlight blur={40}>
+      <iframe
+        className="block aspect-video max-w-lg rounded-xl"
+        width="512"
+        height="288"
+        src="https://www.youtube.com/embed/qxzbh6vPRZg"
+        title="Gradient Loop Background"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        referrerPolicy="strict-origin-when-cross-origin"
+        allowFullScreen
+      ></iframe>
+    </Backlight>
+  )
+}
+
+
+===== EXAMPLE: backlight-image-demo =====
+Title: backlight-image-demo
+
+--- file: example/backlight-image-demo.tsx ---
+import { Backlight } from "@/registry/magicui/backlight"
+
+export default function BacklightImageDemo() {
+  return (
+    <Backlight>
+      <img
+        className="block max-w-lg rounded-xl"
+        src={
+          "https://plus.unsplash.com/premium_photo-1672201106204-58e9af7a2888?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        }
+        alt="fancy gradient background"
+      />
+    </Backlight>
+  )
+}
+
+
+===== EXAMPLE: backlight-svg-demo =====
+Title: backlight-svg-demo
+
+--- file: example/backlight-svg-demo.tsx ---
+import { Backlight } from "@/registry/magicui/backlight"
+
+export default function BacklightSVGDemo() {
+  return (
+    <Backlight blur={5}>
+      <div className="flex max-w-lg gap-16">
+        <svg className="h-16 w-16" viewBox="0 0 256 256" fill="none">
+          <rect
+            width="256"
+            height="256"
+            rx="128"
+            fill="url(#magicui__paint0_linear_601_4643)"
+          />
+          <rect
+            width="256"
+            height="256"
+            rx="128"
+            fill="url(#magicui__paint1_linear_601_4643)"
+          />
+          <path
+            d="M124.157 193.675C123.939 193.783 123.722 193.837 123.505 193.837C123.287 193.837 122.852 193.837 122.2 193.837C120.678 193.837 118.884 193.567 116.818 193.025C114.862 192.591 112.905 191.995 110.948 191.236C109.099 190.586 107.469 189.828 106.055 188.961C104.751 188.094 103.935 187.335 103.609 186.685C103.501 185.167 103.446 183.596 103.446 181.97C103.446 180.345 103.446 178.773 103.446 177.256C103.446 165.118 104.316 152.438 106.055 139.217C107.904 125.995 110.893 111.69 115.025 96.3005C115.459 94.7833 115.894 92.8867 116.329 90.6108C116.873 88.2266 117.416 85.6798 117.96 82.9704C115.351 85.0296 112.252 88.335 108.665 92.8867C105.077 97.3301 101.272 102.64 97.2492 108.818C93.3354 114.887 89.3672 121.606 85.3446 128.975C81.4308 136.236 77.8431 143.66 74.5815 151.246C71.32 158.724 68.4933 166.148 66.1015 173.517C63.8185 180.887 62.4051 187.714 61.8615 194C56.6431 192.483 53.001 190.966 50.9354 189.448C48.9785 187.931 48 186.089 48 183.921C48 181.97 48.5979 179.207 49.7938 175.631C50.9897 172.054 52.6749 167.828 54.8492 162.951C57.0236 158.074 59.6872 152.655 62.84 146.695C65.9928 140.626 69.4718 134.123 73.2769 127.187C77.6256 119.276 81.8656 111.852 85.9969 104.916C90.2369 97.9803 94.3682 91.6946 98.3908 86.0591C102.413 80.4236 106.327 75.5468 110.132 71.4286C114.046 67.3104 117.906 64.1675 121.711 62C123.233 62 125.244 62.3793 127.745 63.1379C130.354 63.8966 132.854 64.8177 135.246 65.9015C137.747 66.9852 139.921 68.1232 141.769 69.3153C143.726 70.399 144.813 71.3202 145.031 72.0788C143.509 75.1133 141.715 79.665 139.649 85.734C137.584 91.803 135.464 98.6847 133.289 106.379C131.224 114.074 129.212 122.256 127.255 130.926C125.407 139.488 123.939 147.724 122.852 155.635C125.353 149.675 128.234 143.498 131.495 137.103C134.866 130.601 138.399 124.207 142.095 117.921C145.792 111.527 149.543 105.35 153.348 99.3892C157.262 93.4286 161.067 88.0099 164.763 83.133C168.459 78.1478 171.884 73.8128 175.037 70.1281C178.298 66.4434 181.179 63.734 183.68 62C185.202 62 187.213 62.3793 189.714 63.1379C192.323 63.8966 194.824 64.8177 197.215 65.9015C199.716 66.9852 201.89 68.1232 203.738 69.3153C205.695 70.399 206.783 71.3202 207 72.0788C203.521 78.2562 200.477 85.7882 197.868 94.6749C195.258 103.562 193.03 112.882 191.182 122.635C189.442 132.389 188.083 142.089 187.105 151.734C186.235 161.271 185.8 169.833 185.8 177.419C185.8 179.911 185.8 182.512 185.8 185.222C185.8 187.931 185.909 190.749 186.126 193.675C184.604 193.675 182.756 193.458 180.582 193.025C178.516 192.7 176.45 192.212 174.385 191.562C172.428 190.911 170.634 190.153 169.003 189.286C167.372 188.527 166.231 187.66 165.578 186.685C165.47 185.167 165.415 183.596 165.415 181.97C165.415 180.345 165.415 178.773 165.415 177.256C165.415 165.118 166.285 152.438 168.025 139.217C169.873 125.995 172.863 111.69 176.994 96.3005C177.429 94.7833 177.918 92.7241 178.462 90.1232C179.005 87.5222 179.549 84.8128 180.092 81.9951C177.048 83.5123 173.569 86.4384 169.655 90.7734C165.85 95 161.936 100.202 157.914 106.379C154 112.448 150.086 119.222 146.172 126.7C142.367 134.177 138.888 141.818 135.735 149.621C132.691 157.315 130.082 165.01 127.908 172.704C125.842 180.291 124.592 187.281 124.157 193.675Z"
+            fill="white"
+          />
+          <defs>
+            <linearGradient
+              id="magicui__paint0_linear_601_4643"
+              x1="128"
+              y1="0"
+              x2="128"
+              y2="256"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="#EF786F" />
+              <stop offset="1" stopColor="#D8595E" />
+            </linearGradient>
+            <linearGradient
+              id="magicui__paint1_linear_601_4643"
+              x1="78"
+              y1="3.7012e-06"
+              x2="236"
+              y2="256"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="#9E7AFF" />
+              <stop offset="0.333333" stopColor="#FE8BBB" />
+              <stop offset="0.666667" stopColor="#FFBD7A" />
+              <stop offset="1" stopColor="#F8EAC3" />
+            </linearGradient>
+          </defs>
+        </svg>
+        <svg
+          className="h-16 w-16"
+          preserveAspectRatio="xMidYMid"
+          viewBox="0 -25 256 256"
+        >
+          <path
+            fill="#EA4335"
+            d="m170.252 56.819 22.253-22.253 1.483-9.37C153.437-11.677 88.976-7.496 52.42 33.92 42.267 45.423 34.734 59.764 30.717 74.573l7.97-1.123 44.505-7.34 3.436-3.513c19.797-21.742 53.27-24.667 76.128-6.168l7.496.39Z"
+          />
+          <path
+            fill="#4285F4"
+            d="M224.205 73.918a100.249 100.249 0 0 0-30.217-48.722l-31.232 31.232a55.515 55.515 0 0 1 20.379 44.037v5.544c15.35 0 27.797 12.445 27.797 27.796 0 15.352-12.446 27.485-27.797 27.485h-55.671l-5.466 5.934v33.34l5.466 5.231h55.67c39.93.311 72.553-31.494 72.864-71.424a72.303 72.303 0 0 0-31.793-60.453"
+          />
+          <path
+            fill="#34A853"
+            d="M71.87 205.796h55.593V161.29H71.87a27.275 27.275 0 0 1-11.399-2.498l-7.887 2.42-22.409 22.253-1.952 7.574c12.567 9.489 27.9 14.825 43.647 14.757"
+          />
+          <path
+            fill="#FBBC05"
+            d="M71.87 61.425C31.94 61.664-.237 94.228.001 134.159a72.301 72.301 0 0 0 28.222 56.88l32.248-32.246c-13.99-6.322-20.208-22.786-13.887-36.776 6.32-13.99 22.786-20.208 36.775-13.888a27.796 27.796 0 0 1 13.887 13.888l32.248-32.248A72.224 72.224 0 0 0 71.87 61.425"
+          />
+        </svg>
+        <svg className="h-16 w-16" viewBox="28 28 128 132" fill="none">
+          <path
+            fill="#F3B01C"
+            d="M108.092 130.021c18.166-2.018 35.293-11.698 44.723-27.854-4.466 39.961-48.162 65.218-83.83 49.711-3.286-1.425-6.115-3.796-8.056-6.844-8.016-12.586-10.65-28.601-6.865-43.135 10.817 18.668 32.81 30.111 54.028 28.122Z"
+          />
+          <path
+            fill="#8D2676"
+            d="M53.401 90.174c-7.364 17.017-7.682 36.94 1.345 53.336-31.77-23.902-31.423-75.052-.388-98.715 2.87-2.187 6.282-3.485 9.86-3.683 14.713-.776 29.662 4.91 40.146 15.507-21.3.212-42.046 13.857-50.963 33.555Z"
+          />
+          <path
+            fill="#EE342F"
+            d="M114.637 61.855C103.89 46.87 87.069 36.668 68.639 36.358c35.625-16.17 79.446 10.047 84.217 48.807.444 3.598-.139 7.267-1.734 10.512-6.656 13.518-18.998 24.002-33.42 27.882 10.567-19.599 9.263-43.544-3.065-61.704Z"
+          />
+        </svg>
+      </div>
+    </Backlight>
+  )
+}
+
+
+
 ===== COMPONENT: bento-grid =====
 Title: Bento Grid
 Description: Bento grid is a layout used to showcase the features of a product in a simple and elegant way.

diff --git a/apps/www/public/llms.txt b/apps/www/public/llms.txt
@@ -16,6 +16,7 @@ This file provides LLM-friendly entry points to documentation and examples.
 - [Theme Toggler](https://magicui.design/docs/components/animated-theme-toggler): A component for theme changing animation.
 - [Aurora Text](https://magicui.design/docs/components/aurora-text): A beautiful aurora text effect
 - [Avatar Circles](https://magicui.design/docs/components/avatar-circles): Overlapping circles of avatars.
+- [Backlight](https://magicui.design/docs/components/backlight): A backlight glow effect for videos, images, and SVGs.
 - [Bento Grid](https://magicui.design/docs/components/bento-grid): Bento grid is a layout used to showcase the features of a product in a simple and elegant way.
 - [Blur Fade](https://magicui.design/docs/components/blur-fade): Blur fade in and out animation. Used to smoothly fade in and out content.
 - [Border Beam](https://magicui.design/docs/components/border-beam): An animated beam of light which travels along the border of its container.
@@ -216,6 +217,9 @@ This file provides LLM-friendly entry points to documentation and examples.
 - [Dotted Map Demo](https://github.com/magicuidesign/magicui/blob/main/example/dotted-map-demo.tsx): Example usage
 - [Dotted Map Demo 2](https://github.com/magicuidesign/magicui/blob/main/example/dotted-map-demo-2.tsx): Example usage
 - [Dotted Map Demo 3](https://github.com/magicuidesign/magicui/blob/main/example/dotted-map-demo-3.tsx): Example usage
+- [backlight-video-demo](https://github.com/magicuidesign/magicui/blob/main/example/backlight-video-demo.tsx): Example usage
+- [backlight-image-demo](https://github.com/magicuidesign/magicui/blob/main/example/backlight-image-demo.tsx): Example usage
+- [backlight-svg-demo](https://github.com/magicuidesign/magicui/blob/main/example/backlight-svg-demo.tsx): Example usage
 
 ## Optional
 

diff --git a/apps/www/public/r/backlight-image-demo.json b/apps/www/public/r/backlight-image-demo.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "backlight-image-demo",
+  "type": "registry:example",
+  "description": "An example of the backlight component with a image.",
+  "registryDependencies": [
+    "@magicui/backlight"
+  ],
+  "files": [
+    {
+      "path": "registry/example/backlight-image-demo.tsx",
+      "content": "import { Backlight } from \"@/registry/magicui/backlight\"\n\nexport default function BacklightImageDemo() {\n  return (\n    <Backlight>\n      <img\n        className=\"block max-w-lg rounded-xl\"\n        src={\n          \"https://plus.unsplash.com/premium_photo-1672201106204-58e9af7a2888?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n        }\n        alt=\"fancy gradient background\"\n      />\n    </Backlight>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}