Programmable Media

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

Jump to this spot in the video  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

Jump to this spot in the video  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.

Add drop shadows

Jump to this spot in the video  1:32 You can add drop shadows to the products in the images using the dropShadow function.

Configure the drop shadows

Jump to this spot in the video  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

Related topics

If you like this, you might also like...

Upload Assets in React
Upload assets using the Upload widget in a React App
Gravity Crops for Images
Indicate which areas to keep when cropping
Product Gallery in React
Embed the Cloudinary Product Gallery in a React app

 

Cloudinary Academy

 

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!

Rate this page: