> ## Documentation Index
> This page is part of the Image and Video APIs product. Fetch the complete documentation index for Image and Video APIs at: https://cloudinary.com/documentation/llms-image-and-video-apis.txt?referrer=docpage and then use it to discover all relevant pages before exploring further.
> If your task extends beyond this product, fetch the top-level index covering all Cloudinary products and topics at: https://cloudinary.com/documentation/llms.txt?referrer=docpage

# 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.
{videoTranscript:publicId=training/Background_Removal_Shadows_in_React}

> **View the code :custom-icon='https://cloudinary-res.cloudinary.com/image/upload/v1778586152/docsite/brand-assets/github.svg' :invert-icon**:
>
> 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}|  | 
| --- | --- |
| | 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}|  | 
| --- | --- |
| | 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}|  | 
| --- | --- |
| | You can add [drop shadows](artistic_effects#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}|  | 
| --- | --- |
| |  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_in_react_tutorial)

Upload assets using the Upload widget in a React app

[Gravity Crops for Images](gravity_transformations_tutorial)

Indicate which areas to keep when cropping

[Product Gallery in React](product_gallery_react_tutorial)

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.