HTML template - opacity, gradient. What are the correct settings?

Hello. I have an HTML page with a simple rectangle colored with a gradient and opacity. In Google Chrome Debug I see the correct display of this rectangle, but as soon as I display the page on SDI, the transparency begins to appear black and has a sharp transition. What settings should I use to display correctly?

body {
background-color: transparent;
overflow: hidden;

.rectangle {
width: 1200px;
height: 60px;
background: linear-gradient(to right, rgba(255, 140, 0, 1), rgba(255, 69, 0, 0));
border-radius: 10px;

it’s not correct

Are you sure other templates with transparency works properly, fill and key?

also the green background seems a bit unusual color to be casual.

It looks like the key settings on the vision mixer are wrong. It needs to be set to premultiplyed key on the mixer.

Green background is a test example, the error applies to all templates.

1 Like

Fill in key are mixed vmix and I couldn’t find any special settings during selection, can you clarify where I can look at them.

I guess the image with green background is from the browser.

I wonder if you have checked individually the two SDI output (Fill + Key) on a monitor, just to be sure what vmix receive.
Because the template seems to be correct

I don’t know vMix, but it does not look, like there is a setting, that could set the key mode. On this page I saw, that you can select the key input to use. Did you do that?

i off coarse do not know your complete workflow.

Although i am not a big fan of NDI it could be a consideration to use or test if it does the keying better.
And maybe even loading the template in vmix itself.

Off coarse this depends on how the template get’s its data.

i know the key selection is a bit hidden / less obvious i v-mix


I think I’ve found what the problem is. if you just take an orange background and apply a key, then everything will work out correctly. But caspar makes 2 layers with transparency, and it turns out that one transparency is superimposed on the other, like a 2x effect

that’s right, in orange background

it turns out that the problem is how caspar generates fill

if you just take an orange background and apply a key, then everything will work out correctly.

That sounds to me like it is expecting straight alpha, which CasparCG isn’t capable of outputting currently. CasparCG only outputs premultiplied alpha.

Does this apply to everything that caspar processes, or just HTML?
Are there any changes expected in the new version?

It applies to everything. Most vision mixers supports both modes, so that it does not matter. Please ask vMix support or forum, if it can process premultiplied alpha (it should) and how to correctly set it up.

Oh thanks. =) I found the settings, everything is fine, vmix has the settings. Thank you very much!

Would you be able to post a screenshot of the settings and what to do to make it work? I am sure there will be other users coming up with a similar question and then it helps to have it.

You need, after adding fill and key inputs. In the fill settings, select the gear in the color key tab, indicate the previously added key input. Then go to the color adjust tab and check the box for premultiplied alpha.

enable premultiplied

disable premultiplied