Bootstrap 5 Background gradient
Last Updated :
08 Apr, 2024
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.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN-->
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script
src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</head>
<body class="m-3">
<h2>Bootstrap 5 Background gradient</h2>
<div class="d-flex flex-row">
<div
class="bg-danger bg-gradient
w-50 p-5
text-light"
>
Warning gradient background
</div>
</div>
<br />
<div class="d-flex flex-row">
<div
class="bg-danger w-50
p-5 text-light"
>
Warning background
</div>
</div>
</body>
</html>
Output:
Bootstrap 5 Background gradient Example Output
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.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN-->
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script
src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</head>
<body class="m-3">
<h2>Bootstrap 5 Background gradient</h2>
<div class="d-flex flex-row">
<div
class="bg-warning bg-gradient
w-50 p-5 text-light"
>
Warning gradient background
</div>
<div
class="bg-light bg-gradient
w-50 p-5 text-dark"
>
Light gradient background
</div>
</div>
<div class="d-flex flex-row">
<div
class="bg-info bg-gradient
w-50 p-5 text-light"
>
Info gradient background
</div>
<div
class="bg-dark bg-gradient
w-50 p-5 text-light"
>
Dark gradient background
</div>
</div>
</body>
</html>
Output:
Bootstrap 5 Background gradient Example Output
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...