[Workaround] How to Add Box Shadow In Next.js Image

nextjs

If you create a class with a box-shadow property and apply the class using the classnameprop to the Image component, Next.js hides the box shadow using overflow:hidden .

As a workaround, add an overflow:visible style to the image wrapper.

For example, consider the following code that renders an image using the Next.js Image component.

<div className={styles.imageWrapper}>
   <Image src="/image.png" alt="" width={300} height={700}/>
</div>

To apply a box shadow, use the following code:

.imageWrapper {
	overflow: visible;
  img {
		box-shadow: 1px 3px 30px -5px rgba(74, 71, 71, 0.75);
	}
}

Note that this is Sass, and the syntax differs slightly from plain CSS:

.imageWrapper {
	overflow: visible;
}
.imageWrapper img {
		box-shadow: 1px 3px 30px -5px rgba(74, 71, 71, 0.75);
}

This is a workaround for Next.js 12. I’ve not tested it on Next.js 13.