# Color animation

## Background color animation

<div align="left"><img src="https://963067965-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MIJW5nbmYRaSNWePAac%2F-MIxu2KP4MClY9gv_q2W%2F-MIxukNxysUjev6HOa50%2Fgif_animation_color.gif?alt=media&#x26;token=2cc69e78-042d-47fe-8742-b1dc32cc25de" alt=""></div>

To add background color animation:

1. Select widget&#x20;
2. Select Insert > Action
3. Double click Action cell of highlighted row in Actions Editor
4. Select Actions > Animation > Set color
5. Select Color

## Overlay color animation

<div align="left"><img src="https://963067965-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MIJW5nbmYRaSNWePAac%2F-MIxu2KP4MClY9gv_q2W%2F-MIxukO13jj6C0htpi1L%2Fgif_animation_overlay_color.gif?alt=media&#x26;token=d82e991d-823a-4f23-9109-8cc14c5abc83" alt=""></div>

To add overlay color animation:

1. Select widget&#x20;
2. Select Insert > Action
3. Double click Action cell of highlighted row in Actions Editor
4. Select Actions > Animation > Set overlay color
5. Select Color
