diff --git a/content/docs/components/hero-video-dialog.mdx b/content/docs/components/hero-video-dialog.mdx
index b969b2041..9cc00dbd8 100644
--- a/content/docs/components/hero-video-dialog.mdx
+++ b/content/docs/components/hero-video-dialog.mdx
@@ -54,6 +54,7 @@ npx shadcn@latest add "https://magicui.design/r/hero-video-dialog"
 | videoSrc       | string | URL of the video to be played    | -                 |
 | thumbnailSrc   | string | URL of the thumbnail image       | -                 |
 | thumbnailAlt   | string | Alt text for the thumbnail image | "Video thumbnail" |
+| maskGradient   | string | CSS gradient for the mask        | -                 |
 
 ## Animation Styles
 
diff --git a/registry/default/magicui/hero-video-dialog.tsx b/registry/default/magicui/hero-video-dialog.tsx
index a0cf2c370..4eb774cfd 100644
--- a/registry/default/magicui/hero-video-dialog.tsx
+++ b/registry/default/magicui/hero-video-dialog.tsx
@@ -22,6 +22,7 @@ interface HeroVideoProps {
   thumbnailSrc: string;
   thumbnailAlt?: string;
   className?: string;
+  maskGradient?: string;
 }
 
 const animationVariants = {
@@ -73,6 +74,7 @@ export default function HeroVideoDialog({
   thumbnailSrc,
   thumbnailAlt = "Video thumbnail",
   className,
+  maskGradient,
 }: HeroVideoProps) {
   const [isVideoOpen, setIsVideoOpen] = useState(false);
   const selectedAnimation = animationVariants[animationStyle];
@@ -80,7 +82,7 @@ export default function HeroVideoDialog({
   return (
     <div className={cn("relative", className)}>
       <div
-        className="relative cursor-pointer group"
+        className={cn("relative cursor-pointer group", maskGradient)}
         onClick={() => setIsVideoOpen(true)}
       >
         <img