Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# Silicon utilities

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

Silicon component

## Faded background colors

##### Primary faded background

##### Secondary background

##### Success faded background

##### Warning faded background

##### Danger faded background

##### Info faded background

##### Dark faded background

    <!-- 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

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

## Translucent image overlay

Primary overlay
Success overlay
Warning overlay
Danger overlay
Info overlay
Dark overlay
White overlay
Gradient overlay

    <!-- 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

## I'm a gradient text

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

## Text shadow

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

## Opacity

Opacity 10% Opacity 15% Opacity 25% Opacity 35% Opacity 40% Opacity 50% Opacity 60% Opacity 70% Opacity 75% Opacity 80% Opacity 90% Opacity 100%

    <!-- Opacity -->
    <div class="opacity-10">...</div>
    <div class="opacity-15">...</div>
    <div class="opacity-25">...</div>
    <div class="opacity-35">...</div>
    <div class="opacity-40">...</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>

Top