{"id":27350,"date":"2023-03-29T08:29:22","date_gmt":"2023-03-29T15:29:22","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=27350"},"modified":"2025-11-06T15:57:38","modified_gmt":"2025-11-06T23:57:38","slug":"remove-image-backgrounds-and-add-realistic-shadows-to-products-in-react","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/remove-image-backgrounds-and-add-realistic-shadows-to-products-in-react","title":{"rendered":"Remove Image Backgrounds and Add Realistic Shadows to Products in React"},"content":{"rendered":"\n

When displaying a set of product images, uniformity is key. Customers should be focusing on the product, not distracted by the background, especially if there are different backgrounds in each image. Therefore it makes sense to conduct product image background removal for any images that you want to group together. But have you ever noticed how products without backgrounds look like they\u2019re floating in mid-air? Applying a realistic-looking product image shadow can \u2018ground\u2019 those floating objects and return a sense of depth to your images.<\/p>\n\n\n\n

In this post you\u2019ll learn how to leverage an image background React JS project to display product sets in a React application, first displaying the original images, resized and optimized for web delivery, then with their backgrounds removed, and finally with drop shadow applied.<\/p>\n\n\n\n

Why Should I Remove Image Backgrounds?<\/h2>\n\n\n\n

There are plenty of advantages that would lead you to remove image backgrounds from your product images. First off, it can improve the appearance of an image by making the subject stand out from it\u2019s surroundings. Secondly, it can make images more versatile by allowing them to be used in different contexts. Finally, it can also help by just reducing the file size of an image.<\/p>\n\n\n\n

However, there are also some downsides that make give you pause before you go ahead and remove image backgrounds from your product images. Product image background removal can be a complex task, especially if it\u2019s a complex image or detailed background. Image quality can also be reduced, if the background isn\u2019t removed smoothly. Additionally, it can also be time-consuming if you need to do it at scale.<\/p>\n\n\n

The Background to Background Removal<\/h2>\n

For several years, Cloudinary has offered an AI background removal add-on<\/a>. Until recently, the only way to use it would have been to trigger it while uploading or updating an image, and only the background-removed version of the image would have been stored. Now, you can store the original image and remove the background on delivery, keeping the original intact. You still need to register for the add-on<\/a>, but now you can simply use the background_removal<\/code> effect transformation parameter (e_background_removal<\/code> in the delivery URL), like this:<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget><\/p>\n

\n<\/div>\n
\n\n\"Image<\/a>\nOriginal<\/b>\n<\/span>\n\n\"Image<\/a>\nBackground removed<\/b>\n<\/span>\n<\/div>\n
\n<\/div>\n

Another recent update to the background removal<\/a> functionality is to recognise cars and remove background content displayed through car windows. A special effect is also added to the windows to simulate real windows. This is all done automatically, using the same e_background_removal<\/code> parameter.<\/p>\n<\/div>\n\n

Product Image Shadow | Shedding Light on Drop Shadow<\/h2>\n

Drop shadow is applied to objects in background-removed images by setting up a virtual light source using the dropshadow<\/code> effect (e_dropshadow<\/code> in URLs):<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\"Image<\/a><\/p>\n

You can set the azimuth, elevation and spread of the virtual light source (see the full syntax<\/a>). Use the following model to help you understand the angles involved:<\/p>\n

\"Image<\/a><\/p>\n

North (0\u00b0\/360\u00b0) is behind the object, so the shadow falls directly in front of the object. Elevation ranges from ground level (0\u00b0) to above the object (90\u00b0), so the smaller the number, the longer the shadow.<\/p>\n

Spread ranges from 0% to 100%, where the smaller the number, the closer the light source is to \u2018point\u2019 light, and larger numbers mean \u2018area\u2019 light.<\/p>\n

Have a play with the parameters in this interactive demo<\/a>.<\/p>\n<\/div>\n\n

Image Background React JS | Overview of the React App<\/h2>\n

The following React App demonstrates how to use the Cloudinary React SDK to remove backgrounds and apply drop shadow.<\/p>\n

Before getting into the details, let\u2019s start by trying it out. Go ahead and have a play.<\/p>\n