Createx Buy now

Createx utilities

Custom Createx classes with a purpose to reduce the frequency of highly repetitive declarations.

Createx component

Faded background colors

Primary faded background
Secondary background
Info faded background
Success faded background
Warning faded background
Danger faded background
Dark faded background
<!-- 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

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

Background cover with overlay

Black overlay
Primary overlay
Success overlay
Warning overlay
Danger overlay
Info overlay
White overlay
Gradient overlay
<!-- Black overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(path-to-bg-image);">
  <div class="position-absolute top-0 start-0 w-100 h-100 bg-black opacity-50"></div>
  <div class="position-relative fw-medium text-white text-shadow text-center zindex-2 py-5">Black overlay</div>
</div>

<!-- Primary overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(path-to-bg-image);">
  <div class="position-absolute top-0 start-0 w-100 h-100 bg-primary opacity-70"></div>
  <div class="position-relative fw-medium text-white text-shadow text-center zindex-2 py-5">Primary overlay</div>
</div>

<!-- Success overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(path-to-bg-image);">
  <div class="position-absolute top-0 start-0 w-100 h-100 bg-success opacity-70"></div>
  <div class="position-relative fw-medium text-white text-shadow text-center zindex-2 py-5">Success overlay</div>
</div>

<!-- Warning overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(path-to-bg-image);">
  <div class="position-absolute top-0 start-0 w-100 h-100 bg-warning opacity-70"></div>
  <div class="position-relative fw-medium text-white text-shadow text-center zindex-2 py-5">Warning overlay</div>
</div>

<!-- Danger overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(path-to-bg-image);">
  <div class="position-absolute top-0 start-0 w-100 h-100 bg-danger opacity-70"></div>
  <div class="position-relative fw-medium text-white text-shadow text-center zindex-2 py-5">Danger overlay</div>
</div>

<!-- Info overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(path-to-bg-image);">
  <div class="position-absolute top-0 start-0 w-100 h-100 bg-info opacity-70"></div>
  <div class="position-relative fw-medium text-white text-shadow text-center zindex-2 py-5">Info overlay</div>
</div>

<!-- White overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(path-to-bg-image);">
  <div class="position-absolute top-0 start-0 w-100 h-100 bg-white opacity-70"></div>
  <div class="position-relative fw-medium text-center zindex-2 py-5">White overlay</div>
</div>

<!-- Gradient overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(path-to-bg-image);">
  <div class="position-absolute top-0 start-0 w-100 h-100 bg-gradient opacity-70"></div>
  <div class="position-relative fw-medium text-center zindex-2 py-5">Gradient overlay</div>
</div>

Opacity

Opacity 25%Opacity 50%Opacity 60%Opacity 70%Opacity 75%Opacity 80%Opacity 90%Opacity 100%
<!-- 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

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

Text shadow

Text shadow

<!-- Text shadow -->
<h2 class="text-white text-shadow">Text shadow</h2>
Top