Remove backgrounds and add drop shadows in React (video tutorial)

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

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.

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

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.