> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

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

[githublink]: https://github.com/cloudinary-community/cloudinary-examples/blob/main/examples/react-background-removal/src/App.jsx

## 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

  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.

> **TIP**: :title=View the code

You can find the code from this tutorial in [GitHub][githublink].
## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### Introduction
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | 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](https://github.com/cloudinary/js-url-gen) library together with a JavaScript framework, such as [React](react_integration).
|

### Remove image backgrounds
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=08 :player=cld} | You can remove image backgrounds in a React app using the `backgroundRemoval` function.
|
```js
import { backgroundRemoval } from "@cloudinary/url-gen/actions/effect";
...
cld.image(publicId)
  .effect(backgroundRemoval())
...
```

### Add drop shadows
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=32 :player=cld} | You can add [drop shadows](effects_and_artistic_enhancements#dropshadow_effect) 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=56 :player=cld} |  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

> **READING**:
>
> * See the [code example](https://github.com/cloudinary-community/cloudinary-examples/blob/main/examples/react-background-removal/src/App.jsx) from the tutorial.

> * Learn more about [image](react_image_transformations) and [video](react_video_transformations) transformations using the React SDK.

> * Check out the [Transformation reference](transformation_reference) for a listing of all Cloudinary transformations, including syntax details and examples.

> * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary).

#### 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 
  

 

 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.