How apply gradient to AlexaHeadline template - alexa

Question

I'm trying to apply a simple radial gradient to the AlexaHeadline template. If you set the boolean param backgroundOverlayGradient to true, a linear gradient appears. Official document says:
When true, apply a gradient to the background.
...but I don't know where to set the gradient.
Any ideas?
Thanks for advice!

Answer 1

Found the answer by myself:
If your template (like in my case the AlexaHeadline template) does not support a property like "overlayGradient", you can use the "background" property. To use this property, APL version 1.3 is required.
Here's an example document customized from the example of the official docs:
{
"type": "APL",
"version": "1.6",
"import": [
{
"name": "alexa-layouts",
"version": "1.3.0"
}
],
"background": {
"type": "radial",
"colorRange": [
"blue",
"#000061"
],
"inputRange": [
0,
1
]
},
"mainTemplate": {
"parameters": [
"headlineData"
],
"items": [
{
"type": "AlexaHeadline",
"primaryText": "${headlineData.primaryText}",
"secondaryText": "${headlineData.secondaryText}",
"backgroundColor": "#colorRed800",
"backgroundImageSource": "https://.png",
"footerHintText": "${headlineData.footerHintText}",
"headerAttributionImage": "${headlineData.headerAttributionImage}",
"headerBackButton": true,
"headerBackButtonAccessibilityLabel": "back",
"headerDivider": false,
"headerSubtitle": "${headlineData.headerSubtitle}",
"headerTitle": "${headlineData.headerTitle}"
}
]
}
}
As you see, there's a "fake" backgroundImageSource-Url. Without that, the gradient does not appear. APL uses the backgroundColor property, if there's no proper backgroundImageSource. So, i think, backgroundColor overrides the background property, if it's used. I tried to apply gradient on the backgroundColor property, but that does not work for me.