The background component displays behind other elements on the screen and can be a custom color, image, or video.

backgrounds across devices

How to use backgrounds

When adding text over your background color, image, or video; you might need to add an overlay treatment to improve the readability of the text. If your text color is similar to any part of your background, you should change the color of your scrim to maintain enough contrast for legibility. The following sections provide details about optimal background colors.

Default background

On most viewport profiles, the default is dark blue with an overlay gradient and noise.

Default background

On most viewport profiles, the default is dark blue with an overlay gradient and noise.

Default TV background

On TVs, the default full-screen background is a flat dark blue and the default partial screen background has 90% opacity.


You can set background images and videos as best-fill or best-fit.


Best-fill scales the image uniformly up or down so that you completely cover the background for the viewport profile. Consider using best-fill for most background images and videos.


Best-fit scales the image uniformly up or down so that the entire image fits within the viewport profile. Best-fit blurs and duplicates the background image.


You can customize the position of background images and videos in the following ways.


Align to the bottom, horizontally centered.


Align the bottom-left corners.


Align the bottom-right corners.


Center horizontally and vertically.


Align to the left side, vertically centered.


Align to the right side, vertically centered.


Align to the top, horizontally centered.


Align the top-left corners.


Align the top-right corners.

Overlay options

There are different options to consider for overlays.


Use blur to soften images, so that text becomes more legible. You should combine blur with a color overlay or use it for images that have resolution issues when they are sized up.

Color overlay

Use color overlays to increase contrast and improve legibility.

Gradient overlay

Gradient overlays add contrast to the bottom portion of the screen, creating a safe area for text.


horizontal divider line

Consider using a gradient overlay if text is at the edge of the screen.


horizontal divider line

Use a gradient or color overlay to increase contrast between content and the background.

Video backgrounds

You can turn autoplay on or off and you can set how many times the video loops. Videos should be secondary to the experience—not eye-catching or dynamic. In this example, Alexa's speech is primary and the video is secondary.


When you add overlay elements to the background, you can help improve the legibility of text over the background. To make your text highly legible, make sure that the text is at a 4.5:1 contrast ratio to the background of your choice. Amazon designed all the background palette colors for use with white text. You will need to test any other color background to make sure that your text is still legible at a 4.5:1 ratio. For example, if you have a dark background and your text is black, you should choose a contrasting color for the scrim between the background and the text to make sure you're at a ratio of 4.5:1.

Try it out
Related developer documentation