Question 401039 in CSS Question posted in
Some basic documentation can be found here.

How to implement an arch-shaped shadow for an image in React with Tailwind CSS?

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.

enter image description here

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.

Tags:

2

Answers


  1. 0

    it seems like you are on the right track, but the CSS might need some adjustments to ensure that the shadow covers the top of the image correctly. Please try like this if you can get the correct way.

    .arch-shadow {  
  position: absolute;  
  top: 0; /* Positioning it at the top */  
  left: 0;  
  right: 0;  
  height: 50%; /* You can adjust this height */  
  background: rgba(0, 0, 0, 0.5);  
  border-radius: 50%; /* This will create a circular top arc */  
  transform: translateY(-50%); /* Move it upwards so that it overlaps the image */  
  z-index: 1; /* Make sure it's above the image but below the title */  
}

    Here is how you can integrate everything in your React component:

    const ImageWithArchShadow = ({ imageUrl, title, description }) => {  
  return (  
    <div className="relative flex justify-center w-full">  
      <CardImgFrame  
        imageUrl={imageUrl}  
        alt={title}  
        frameClassName="aspect-4/5 h-[516px] relative z-10 overflow-visible" // Ensure overflow is visible  
        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>  
  );  
};
    Login or Signup to reply.
  2. 0

    You could put the arch as the background to the after pseudo element on a containing element. And then make it a semi circle by using radial-gradient and clip-path.

    Here’s a simple example:

    <style>
  * {
    margin: 0;
  }
  
  div {
    width: 100vw;
    height: 100vh;
    background-image: url(https://picsum.photos/id/1015/768/1024);
    background-size: cover;
    position: relative;
  }
  
  div::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1;
    opacity: 0.3;
    background-image: radial-gradient(circle at 50% 50%, transparent 0 70%, gray 70% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  }
</style>
<div></div>

    However, note that you will have to think through what the design is to be when the aspect ratio of the viewport goes to landscape, or even before then if the relative height isn’t sufficient to confine the semi circle to a small enough area so enough of the underlying image shows through.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search