Bootstrap 5 Background gradient

Bootstrap 5 Background gradient is used to add a gradient to the background. Semi-transparent white serves as the gradient's starting point and fades off toward the bottom. By using the gradient in CSS, we can create variants styling of images which can help to make an attractive webpage.

Pre-requisite:Bootstrap 5 Background Color

Bootstrap 5 Background Gradient Classes:

• bg-gradient: This class is used to add the background gradient.

Syntax:

<div class= "Background Color Class bg-gradient >
 ...
</div>

Examples of Bootstrap 5 Background gradient

Example 1: The following code demonstrates the Background Gradient using danger background class with it's varient.

Output:

👁 BtGradient

Example 2: The following code demonstrates the Background Gradient using bg-warning, bg-info, bg-light and bg-dark classes of the Bootstrap 5 Background Gradient properties.

Output:

👁 gradient