# Adding a fade transition

You can add a fade transition at any point in your experience. You can customize how long the screen remains black, and the duration of the fade-out and fade-in transitions.

## Adding a fade transition to an experience

1. From the panel on the left-hand side, select <img src="https://3460182399-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwVx6bvwqEE7tD0TYOcfj%2Fuploads%2Fgit-blob-b98651caafb53c306344b441591d797308c8f683%2Ficon_ifx.png?alt=media&#x26;token=4b4f10e0-26dc-4925-ba60-254b253bb1f4" alt="" data-size="line"> **IFX**.
2. From the library of IFX, select **Fade to Color**.
3. Place the IFX in the environment. The position of the IFX isn't important.

{% hint style="info" %}
The IFX library also includes a **Fade to Black for User Camera Screen** IFX. However the **Fade to Color** IFX provides improved functionality and is recommended in all cases.
{% endhint %}

## Fade to Color effect options

For instructions on how to access effect options, see [effect-options](https://docs.engagevr.io/engage/experience-editor/working-with-objects/effect-options "mention"). The only additional option is to set which color to use for the transition.

![Chroma key screen color picker option](https://3460182399-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwVx6bvwqEE7tD0TYOcfj%2Fuploads%2Fgit-blob-578a7e0c4e840dda4fb848c6178fce9458faa933%2Fchroma_color_picker.png?alt=media\&token=f8f04fce-38d2-48f9-b336-74f7e60c8e1f)

* To set the transition color, select **Choose Color**, select a color in the **Color Picker**, and then select **OK**.

## Configuring transition times

You control the transition times through the length of the container on the timeline, and through the **Fade In** and **Fade Out** effect options, as shown in the following image:

![Transition times](https://3460182399-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwVx6bvwqEE7tD0TYOcfj%2Fuploads%2Fgit-blob-283ff6cf70031ba3b8a7a51b4c6421fbc23a8e6a%2Ffade_transition.jpg?alt=media\&token=ffda107f-2ce6-4499-b5d5-ab8157fd17ab)

* The fade will begin at the start of the container, and last for the duration set by the **Fade In** effect option.
* After the Fade In duration, the screen will remain the color that you have chosen until the end of the container.
* The fade-out of the color will begin at the end of the container, and last for the duration set by the **Fade Out** effect option.