Bootstrap Shadow Color

Custom Shadow

Bootstrap 5 provides utility classes for applying shadow effects to elements. However, sometimes you might want more control over the shadow's colors. To achieve this, we'll create a set of custom shadow color classes. These classes will allow you to easily apply customized shadows with specific colors to your elements.

/* Custom shadow class definitions */

.shadow {
  --bs-shadow-rgb: 0, 0, 0;
  box-shadow: 0 0.5rem 1rem rgba(var(--bs-shadow-rgb), 0.15) !important;
}

.shadow-sm {
  --bs-shadow-rgb: 0, 0, 0;
  box-shadow: 0 0.125rem 0.25rem rgba(var(--bs-shadow-rgb), 0.075) !important;
}

.shadow-lg {
  --bs-shadow-rgb: 0, 0, 0;
  box-shadow: 0 1rem 3rem rgba(var(--bs-shadow-rgb), 0.175) !important;
}

.shadow-none {
  box-shadow: none !important;
}

In the above code, we've defined custom shadow classes for different shadow intensities (.shadow, .shadow-sm, .shadow-lg) and a class to remove the shadow (.shadow-none). The --bs-shadow-rgb variable allows you to define the shadow color, and the box-shadow property applies the custom shadow with the specified color and intensity.

Adding Colorful Accents

Beyond shadows, adding colored accents can enhance your website's visual appeal. We'll extend the concept of custom shadow classes to incorporate various colors for different elements.

/* Custom shadow classes with specific colors */

.shadow-primary {
  --bs-shadow-rgb: var(--bs-primary-rgb);
}

.shadow-secondary {
  --bs-shadow-rgb: var(--bs-secondary-rgb);
}

.shadow-success {
  --bs-shadow-rgb: var(--bs-success-rgb);
}

.shadow-info {
  --bs-shadow-rgb: var(--bs-info-rgb);
}

.shadow-warning {
  --bs-shadow-rgb: var(--bs-warning-rgb);
}

.shadow-danger {
  --bs-shadow-rgb: var(--bs-danger-rgb);
}

.shadow-light {
  --bs-shadow-rgb: var(--bs-light-rgb);
}

.shadow-dark {
  --bs-shadow-rgb: var(--bs-dark-rgb);
}

In this code, we've created shadow classes corresponding to different contextual colors (primary, secondary, success, etc.). These classes utilize Bootstrap's color variables (e.g., --bs-primary-rgb) to define the shadow color. When applied to elements, these classes not only add shadows but also infuse the elements with vibrant, context-specific hues.

Usage in HTML

To apply the custom shadow and color classes to your HTML elements, you can follow these examples:

<div class="shadow shadow-primary p-3">Primary Shadow</div>
<div class="shadow shadow-success p-3">Success Shadow</div>
<div class="shadow shadow-info p-3">Info Shadow</div>
<div class="shadow shadow-warning p-3">Warning Shadow</div>
<div class="shadow-lg shadow-warning p-3">Warning Shadow lg</div>
<div class="shadow-sm shadow-warning p-3">Warning Shadow sm</div>
<div class="shadow-none p-3">No Shadow</div>

By using these custom classes, you can effortlessly create visually striking elements with personalized shadows and color accents. This level of customization empowers you to tailor Bootstrap's design to better match your project's aesthetic requirements.