Digital Asset Management
Remove backgrounds and add drop shadows in React (video tutorial)
Last updated: Sep-12-2024
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
 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. Remember to register for the Cloudinary AI Background Removal add-on before trying this. |
JS
import { backgroundRemoval } from "@cloudinary/url-gen/actions/effect";
...
cld.image(publicId)
.effect(backgroundRemoval())
...Add drop shadows
| 1:32 |
You can add drop shadows to the products in the images using the dropShadow function. |
JS
import { backgroundRemoval, dropShadow } from "@cloudinary/url-gen/actions/effect";
...
cld.image(publicId)
.effect(backgroundRemoval())
.effect(dropShadow())
...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. |
JS
import { backgroundRemoval, dropShadow } from "@cloudinary/url-gen/actions/effect";
...
cld.image(publicId)
.effect(backgroundRemoval())
.effect(dropShadow()
.azimuth(150)
.elevation(50)
.spread(70))
...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...
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.
✖️