Backgrounds
Use our utilities to quickly style almost any element. Great for text, images, buttons, or any other element.
Background Color : Solid
.bg-gray-[100-900]
<div class="bg-primary"></div>
<div class="bg-secondary"></div>
<div class="bg-success"></div>
<div class="bg-danger"></div>
<div class="bg-warning"></div>
<div class="bg-info"></div>
<div class="bg-light"></div>
<div class="bg-dark"></div>
<div class="bg-soft-primary"></div>
<div class="bg-soft-secondary"></div>
<div class="bg-soft-success"></div>
<div class="bg-soft-danger"></div>
<div class="bg-soft-warning"></div>
<div class="bg-soft-info"></div>
<div class="bg-soft-light"></div>
<div class="bg-soft-dark"></div>
<div class="bg-gray-100"></div>
<div class="bg-gray-200"></div>
<div class="bg-gray-300"></div>
<div class="bg-gray-400"></div>
<div class="bg-gray-500"></div>
<div class="bg-gray-600"></div>
<div class="bg-gray-700"></div>
<div class="bg-gray-800"></div>
<div class="bg-gray-900"></div>
Background Color : Gradient
<div class="bg-gradient bg-primary"></div>
<div class="bg-gradient bg-secondary"></div>
<div class="bg-gradient bg-success"></div>
<div class="bg-gradient bg-danger"></div>
<div class="bg-gradient bg-warning"></div>
<div class="bg-gradient bg-info"></div>
<div class="bg-gradient bg-light"></div>
<div class="bg-gradient bg-dark"></div>
Background Color : Multi
<div class="bg-gradient-linear"></div>
<div class="bg-gradient-linear-purple"></div>
<div class="bg-gradient-linear-indigo"></div>
<div class="bg-gradient-linear-danger"></div>
<div class="bg-gradient-linear-success"></div>
<div class="bg-gradient-linear-primary"></div>
Background Image
Fixed Background
.bg-fixed
Cover Background
.bg-cover
Blur Background
.bg-blur
Between
.bg-between
<!-- Background : Fixed -->
<div class="bg-fixed" style="background-image:url(../demo.files/images/unsplash/idin-ebrahimi-JXPP3xFbb-k-unsplash.jpg)">
...
</div>
<!-- Background : Cover -->
<div class="bg-cover" style="background-image:url(../demo.files/images/unsplash/idin-ebrahimi-JXPP3xFbb-k-unsplash.jpg)">
...
</div>
<!-- Background : Blur -->
<div class="position-relative overflow-hidden">
<div class="position-absolute-full bg-cover bg-blur" style="background-image:url(../demo.files/images/unsplash/idin-ebrahimi-JXPP3xFbb-k-unsplash.jpg)"></div>
<div class="position-relative text-white">
...
</div>
</div>
<!-- Background : Between -->
<div class="mb-2 bg-between" style="background-image:url(../demo.files/images/unsplash/evie-s-TeTbSH6SUyw-unsplash.jpg), url(../demo.files/images/unsplash/evie-s-vbA1HNW-APA-unsplash.jpg)">
<div class="position-relative text-center">
<h1 class="m-0">Between</h1>
<p>lorem ipsum</p>
</div>
</div>