question

Hello and thanks for your post!

Frame components don't natively support that, but you could use a use an AVG gradient instead.

Example below.

Document:

{
    "type": "APL",
    "version": "1.4",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.2.0"
        }
    ],
    "graphics": {
        "gradientBackground": {
            "type": "AVG",
            "version": "1.1",
            "height": 100,
            "width": 100,
            "scaleTypeHeight": "grow",
            "parameters": [
                {
                    "name": "gradientFill",
                    "type": "gradient"
                }
            ],
            "items": [
                {
                    "type": "path",
                    "pathData": "M0,0 L${width},0 L${width},${height} L0,${height}",
                    "fill": "${gradientFill}"
                }
            ]
        }
    },
    "mainTemplate": {
        "parameters": [
            "backgroundData"
        ],
        "items": [
            {
                "type": "Container",
                "width": "100%",
                "height": "100%",
                "items": [
                    {
                        "type": "VectorGraphic",
                        "source": "gradientBackground",
                        "width": "100%",
                        "height": "100%",
                        "scale": "fill",
                        "gradientFill": "${backgroundData.pictureSource ? backgroundData.pictureOverlay : backgroundData.noPictureOverlay}"
                    }
                ]
            }
        ]
    },
    "layouts": {}
}

Datasources:

{
        "backgroundData": {
            "headlineText": "Red/Black gradient",
            "pictureSource": "",
            "pictureOverlay": {
                "type": "linear",
                "colorRange": [
                    "rgb(255,0,0,0.2)",
                    "rgb(0,0,0,1.0)"
                ]
            },
            "noPictureOverlay": {
                "type": "linear",
                "colorRange": [
                    "rgb(125,0,0,1)",
                    "rgb(10,10,10,1)"
                ]
            }
        }
    }

This will create a Red/Black gradient.

Kind regards,
Gaetano