CSS gradient overlay

Bootstrap 5 CSS gradient overlay component

Responsive CSS gradient overlay built with Bootstrap 5. Enhance your design with captivating effects using CSS Gradient Overlay.

Basic example

To get a CSS gradient overlay, you need to use a mask:

Masks require .bg-image wrapper which sets a position to relative, overflow to hidden, and properly center the image.
The inside .bg-image wrapper as the first child we place an img element with the source link
Below is the actual mask. We set a color and opacity via hsla code and inline CSS. By manipulating HSLA code you can change the color and opacity of the gradient.
However, the more convenient way will be to use our gradient generator.

Show code Edit in sandbox

HTML

        
            
      <div class="bg-image">
        <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="w-100" />
        <div
          class="mask"
          style="
            background: linear-gradient(
              45deg,
              hsla(168, 85%, 52%, 0.7),
              hsla(263, 88%, 45%, 0.7) 100%
            );
          "
        ></div>
      </div>

Show code Edit in sandbox

HTML
CSS

        
            
      <div class="bg-image  w-50">
        <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="w-100" />
        <div
          class="mask gradient-custom"
        ></div>
      </div>

        
            
      .gradient-custom {
        /* fallback for old browsers */
        background: #fa709a;
      
        /* Chrome 10-25, Safari 5.1-6 */
        background: -webkit-linear-gradient(to right, rgba(250,112,154,0.5), rgba(254,225,64,0.5));
      
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        background: linear-gradient(to right, rgba(250,112,154,0.5), rgba(254,225,64,0.5))
      }