Remove backgrounds and add drop shadows in React (video tutorial)
Last updated: Sep-02-2024
On this page:
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.
Video tutorial
View the code
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
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
You can remove image backgrounds in a React app using the backgroundRemoval function. Remember to register for the Cloudinary AI Background Removal add-on before trying this. |
|
Add drop shadows
You can add drop shadows to the products in the images using the dropShadow function. |
|
Configure the drop shadows
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
Related topics
- 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...
Upload Assets in React
Upload assets using the Upload widget in a React AppGravity Crops for Images
Indicate which areas to keep when croppingProduct Gallery in React
Embed the Cloudinary Product Gallery in a React app
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.
✖️