How do I add a text overlay with a custom background color

Shotstack API
1

We are trying to add text overlay with custom background colors in various track clips. How would we be able to do this?

2

If I understand correctly you would like to create text in different colors over the top of backgrounds with different colors.

I have created a JSON sample using our HTML asset which is the best way to achieve this - I use an HTML asset that is the same size or bigger than the video size and set it’s background color. Also take a look at the HTML asset here for a bit more detail: https://shotstack.io/docs/api/#tocshtmlasset

{
    "timeline": {
        "soundtrack": {
            "src": "https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/private/epic.mp3"
        },
        "fonts": [
            {
                "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/LilitaOne-Regular.ttf"
            }
        ],
        "background": "#FFFFFF",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p>HELLO GREEN</p>",
                            "css": "p { font-family: \"Lilita One\"; color: #ffc800; font-size: 64px; text-align: center; }",
                            "width": 1280,
                            "height": 720,
                            "background": "transparent"
                        },
                        "start": 1.2,
                        "length": 5,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p></p>",
                            "width": 1280,
                            "height": 720,
                            "background": "#00c7a2"
                        },
                        "start": 0,
                        "length": 7
                    },
                                        {
                        "asset": {
                            "type": "html",
                            "html": "<p>HELLO ORANGE</p>",
                            "css": "p { font-family: \"Lilita One\"; color: #00c7a2; font-size: 64px; text-align: center; }",
                            "width": 1280,
                            "height": 720,
                            "background": "transparent"
                        },
                        "start": 8,
                        "length": 5,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p></p>",
                            "width": 1280,
                            "height": 720,
                            "background": "#ffc800"
                        },
                        "start": 7,
                        "length": 7
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "sd"
    }
}