Createx utilities

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

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

<!-- Info faded background -->
<div class="bg-faded-info">...</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>

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

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

<!-- Background cover with overlay -->
<div class="bg-size-cover position-relative py-5" style="background-image: url(path-to-background-image);">
  <span class="bg-overlay opacity-60"></span>
  <div class="bg-overlay-content">
    <!-- Content goes here -->
  </div>
</div>

<!-- Background cover with gradient overlay -->
<div class="bg-size-cover position-relative py-5" style="background-image: url(path-to-background-image);">
  <span class="bg-overlay bg-gradient opacity-60"></span>
  <div class="bg-overlay-content">
    <!-- Content goes here -->
  </div>
</div>

<!-- Opacity -->
<div class="opacity-25"></div>
<div class="opacity-50"></div>
<div class="opacity-60"></div>
<div class="opacity-70"></div>
<div class="opacity-75"></div>
<div class="opacity-80"></div>
<div class="opacity-90"></div>
<div class="opacity-100"></div>

<!-- Image swap on hover -->
<a href="#" class="cs-swap-image">
  <img src="path-to-image" class="cs-swap-to" width="176" alt="Alt text">
  <img src="path-to-image" class="cs-swap-from" width="176" alt="Alt text">
</a>