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

Show code