Gradients

The helper class bg-gradient can be used  to add gradient color effect to your images in slideshows and single fullscreen image. There are 5 options that you can use ( from bg-graident to bg-gradient5 ). Here's an example:

<!-- ************* Single image Carousel ************* -->

<div id="image-fullwidth">
    <div class="item">
        <div class="hs-overlay bg-gradient">
        </div>
        <img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/header.jpg" alt="" />
            <div class="carousel-caption animated fadeInLeft">
               <div class="inner">
                <h1 class="color-white big weight-600 left-align">
                    It's time for custom design
               </h1>
                <br />
            </div>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your fullwidth image
</div>

If non of 5 styles in CSS aren't good for your website, you can change them for your own ones by clicking the button 'gradients'.

Just change the default styles in CSS or add others  for example bg-gradient6, bg-gradient7 etc

<!-- ************* Single image Carousel ************* -->

<div id="image-fullwidth">
    <div class="item">
        <div class="hs-overlay bg-gradient">
        </div>
        <img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/header.jpg" alt="" />
            <div class="carousel-caption animated fadeInLeft">
               <div class="inner">
                <h1 class="color-white big weight-600 left-align">
                    It's time for custom design
               </h1>
                <br />
            </div>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your fullwidth image
</div>

The alternative way is to use inline style, so the code  of gradient color will be added directly to the Widget/HTML.  Please check an example below:

<!-- ************* Single image Carousel ************* -->

<div id="image-fullwidth">
    <div class="item">
        <div class="hs-overlay bg-gradient" style=" <!-- the code is placed here --> ">
        </div>
        <img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/header.jpg" alt="" />
            <div class="carousel-caption animated fadeInLeft">
               <div class="inner">
                <h1 class="color-white big weight-600 left-align">
                    It's time for custom design
               </h1>
                <br />
            </div>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your fullwidth image
</div>

<!-- ************* Single image Carousel ************* -->

<div id="image-fullwidth">
    <div class="item">
        <div class="hs-overlay bg-gradient" style=" 

background: #4568DC; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #4568DC , #B06AB3); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #4568DC , #B06AB3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
         ">
        </div>
        <img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/header.jpg" alt="" />
            <div class="carousel-caption animated fadeInLeft">
               <div class="inner">
                <h1 class="color-white big weight-600 left-align">
                    It's time for custom design
               </h1>
                <br />
            </div>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your fullwidth image
</div>