Silicon utilities

<!-- Primary faded background -->
<div class="bg-faded-primary">...</div>

<!-- Secondary background -->
<div class="bg-secondary">...</div>

<!-- Success faded background -->
<div class="bg-faded-success">...</div>

<!-- Warning faded background -->
<div class="bg-faded-warning">...</div>

<!-- Danger faded background -->
<div class="bg-faded-danger">...</div>

<!-- Info faded background -->
<div class="bg-faded-info">...</div>

<!-- Dark faded background -->
<div class="bg-faded-dark">...</div>

<!-- Gradient background -->
<div class="bg-gradient-primary">...</div>

<!-- Primary overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(assets/img/blog/podcasts/02.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-primary opacity-60"></span>
  <div class="position-relative fw-bold text-white text-shadow text-center zindex-5 py-5">Primary overlay</div>
</div>

<!-- Success overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(assets/img/blog/podcasts/02.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-success opacity-60"></span>
  <div class="position-relative fw-bold text-white text-shadow text-center zindex-5 py-5">Success overlay</div>
</div>

<!-- Warning overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(assets/img/blog/podcasts/02.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-warning opacity-60"></span>
  <div class="position-relative fw-bold text-white text-shadow text-center zindex-5 py-5">Warning overlay</div>
</div>

<!-- Danger overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(assets/img/blog/podcasts/02.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-danger opacity-60"></span>
  <div class="position-relative fw-bold text-white text-shadow text-center zindex-5 py-5">Danger overlay</div>
</div>

<!-- Info overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(assets/img/blog/podcasts/02.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-info opacity-60"></span>
  <div class="position-relative fw-bold text-white text-shadow text-center zindex-5 py-5">Info overlay</div>
</div>

<!-- Dark overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(assets/img/blog/podcasts/02.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-60"></span>
  <div class="position-relative fw-bold text-white text-shadow text-center zindex-5 py-5">Dark overlay</div>
</div>

<!-- White overlay -->
<div class="position-relative bg-white bg-size-cover py-5" style="background-image: url(assets/img/blog/podcasts/02.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-white opacity-60"></span>
  <div class="position-relative fw-bold text-dark text-center zindex-5 py-5">White overlay</div>
</div>

<!-- Gradient overlay -->
<div class="position-relative bg-size-cover py-5" style="background-image: url(assets/img/blog/podcasts/02.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-gradient-primary opacity-60"></span>
  <div class="position-relative fw-bold text-white text-shadow text-center zindex-5 py-5">Gradient overlay</div>
</div>

<!-- Gradient text -->
<h2 class="display-4 mb-0"><span class="text-gradient-primary">I'm a gradient text</span></h2>

<!-- Text shadow example -->
<h2 class="display-4 text-white text-shadow mb-0">Text shadow</h2>