Gradient background
Bootstrap 5 Gradient background component
Responsive gradient background built with Bootstrap 5. Enhance your web design with beautiful, intuitive, and responsive gradient backgrounds.
Basic example
By adding a .bg-gradient
class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.
Do you need a gradient in your custom CSS? Just add background-image: var(--mdb-gradient);
.
Our gradient generator
Add .gradient-custom
class to the div, then add the CSS code generated in the CSS gradients generator.
Advanced
An advanced gradient can be created by combining multiple layers of linear and radial gradients and using background blend modes.