Last updated: Feb-25-2026
Overview
This video tutorial shows you how to remove the background from images and add a drop shadow to the product in a React application.
This video is brought to you by Cloudinary's video player - embed your own!
Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.
You can find the code from this tutorial in GitHub.
Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
Introduction
 0:00 |
Add consistency to your product images by programmatically removing image backgrounds and adding a drop shadow to the products. You can achieve this using the js-url-gen library together with a JavaScript framework, such as React. |
Remove image backgrounds
| 1:08 |
You can remove image backgrounds in a React app using the backgroundRemoval function. |
Add drop shadows
| 1:32 |
You can add drop shadows to the products in the images using the dropShadow function. |
Configure the drop shadows
| 1:56 |
You can make the shadow fall at a specific angle and intensity by setting up the light source using the parameters azimuth, elevation and spread. |
Keep learning
- See the code example from the tutorial.
- Learn more about image and video transformations using the React SDK.
- Check out the Transformation reference for a listing of all Cloudinary transformations, including syntax details and examples.
- Watch more Dev Hints videos on the Cloudinary YouTube channel.
If you like this, you might also like...
Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.
✔️ Feedback sent!
✖️
Error
Unfortunately there's been an error sending your feedback.