Gradient Tokens You can set custom colors for the gradient by setting values for the custom variables --m-bolt-bg-highlight and --m-bolt-bg-lowlight.
Important Notes: It's recommended to set a theme class (t-bolt-*) on the same element as your custom colors. This theme will set the color of text, buttons, drop shadows, etc, so should be similar to the custom colors. Do not put an element with a theme class inside .
Demo

Custom Dark Gradient Colors

This element has the following style attribute:

--m-bolt-bg-highlight: var(--bolt-color-teal); --m-bolt-bg-lowlight: var(--bolt-color-navy-dark)

Custom Light Gradient Colors

This element has the following style attribute:

--m-bolt-bg-highlight: #FFFACD; --m-bolt-bg-lowlight: #AFEEEE;
Twig
{% include '@bolt-components-teaser/teaser.twig' with {
  attributes: {
    style: '--m-bolt-bg-highlight: var(--bolt-color-teal); --m-bolt-bg-lowlight: var(--bolt-color-navy-dark)',
    class: [
      'u-bolt-bg-gradient',
      'u-bolt-padding-xlarge',
      't-bolt-navy-light',
    ],
  },
  variant: 'card',
  headline: {
    text: 'Custom Gradient Colors',
  },
} only %}
HTML
<div class="u-bolt-bg-gradient t-bolt-navy-light u-bolt-padding-xlarge" style="--m-bolt-bg-highlight: var(--bolt-color-teal); --m-bolt-bg-lowlight: var(--bolt-color-navy-dark)">
  <h2>Custom Gradient Colors</h2>
</div>