Alpha Mask on image using Chakra UI to create an opacity gradient

I want to create a simple opacity gradient on an image. I'm using Next.JS with Chakra UI and Tailwind CSS for the front-end design, and I cannot find a way to do it.

This is a result that I did on figma using an image and a box with an alpha mask and a linear gradient: See this image example

This is what I currently have: Image of my current web-app

This is my current code:

loginPage.js

import { Box, Flex, Image, Card } from "@chakra-ui/react";
export default function LoginPage() {
  return (
    <Flex
      paddingX={0}
      marginX={0}
      width={"100%"}
      justifyContent={"space-between"}
    >
      <Box>
        <Image src="./img/bordeaux.png"></Image>
      </Box>

      <Flex direction={"column"} justifyContent={"space-evenly"}>
        <Card.Root>
          <Card.Header />
        </Card.Root>
        <Card.Root>
          <Card.Header />
        </Card.Root>
      </Flex>
    </Flex>
  );
}

page.js

import Header from "./pages/header";
import LoginPage from "./pages/loginPage";

export default function Home() {
  return (
    <>
      <Header />
      <LoginPage />
    </>
  );
}

layout.js

import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { ColorModeProvider } from "@/components/ui/color-mode";
import { Provider } from "@/components/ui/provider";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <Provider>
          <ColorModeProvider
            className={`${geistSans.variable} ${geistMono.variable} antialiased`}
          >
            {children}
          </ColorModeProvider>
        </Provider>
      </body>
    </html>
  );
}

I tried to:

Have an image with a linear gradient background
Have a box with linear gradient and an image inside it with blend mode multiply
Have a box on top of an image with a linear gradient.

But nothing works...

Thanks!

Solution

Ok I find a way to do it using the maskImage and linearGradient (thanks to this post: Using CSS, can you apply a gradient mask to fade to the background over text?)

Here's my new loginPage.js:

import { Box, Flex, Image, Card } from "@chakra-ui/react";
export default function LoginPage() {
  return (
    <Flex
      paddingX={0}
      marginX={0}
      width={"100%"}
      justifyContent={"space-between"}
    >
      <Box>
        <Box maskImage="linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));">
          <Image src="./img/bordeaux.png"></Image>
        </Box>
      </Box>

      <Flex direction={"column"} justifyContent={"space-evenly"}>
        <Card.Root>
          <Card.Header />
        </Card.Root>
        <Card.Root>
          <Card.Header />
        </Card.Root>
      </Flex>
    </Flex>
  );
}