I’m trying to create an arch-shaped shadow effect for an image in my React project using Tailwind CSS. My goal is to have the top part of the image covered by a semi-transparent arch-shaped shadow, similar to the attached example image.

Here is what I have tried so far:

.arch-shadow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 100% 100% 0 0;
  z-index: 1;
}

<div ref={viewRef} className="w-full relative flex justify-center">
  <CardImgFrame
    imageUrl={imageUrl}
    alt={title}
    frameClassName="aspect-4/5 h-[516px] relative z-10"
    imageClassName="object-fill"
    priority={true}
  />
  <div className="arch-shadow"></div>
  {description && (
    <p className="absolute text-white bottom-3 font-semibold z-20">
      {title}
    </p>
  )}
</div>

I expect the top part of the image to be covered by a semi-transparent arch-shaped shadow, so that it looks like the image has a shadow overlay with an arch shape on the top.

The current implementation either covers the entire image or doesn’t produce the desired arch-shaped effect at the top of the image.