shadows with color - e.g. shadow-success?

[benkoshy]

Is it crazy if we allow for shadows of different colours? e.g. shadow-success or shadow-danger? Perhaps I'm missing something in the documentation etc. but I would welcome this ability: https://getbootstrap.com/docs/5.1/utilities/shadows/

[mozi-h]

Assuming you're using BT via sass, you can iterate through the theme colors and generate a themed variant (using the default box-shadows styles) like this:

@each $state, $value in $theme-colors {
	.shadow-#{$state} {
		box-shadow: 0 0.5rem 1rem rgba($value, 0.15);
	}
	.shadow-#{$state}-sm {
		box-shadow: 0 0.125rem 0.25rem rgba($value, 0.075);
	}
	.shadow-#{$state}-lg {
		box-shadow: 0 1rem 3rem rgba($value, 0.175);
	}
	.shadow-#{$state}-inset {
		box-shadow: inset 0 1px 2px rgba($value, 0.075);
	}
}

Disclaimer: There is probably a slightly sleeker way to do this

Note that the default shadows (if you are planning to use them) need to be enabled with $enable-shadows (see options)

---

I'm not seeing this in bootstrap, however.

• It is probably used very rarely (even the normal shadows which are implemented need to be enabled first)
• Can be supplemented easily (see above) if needed
• Shadows in real life are always dark

[benkoshy]

Hey Mozi

I appreciate the comment, and the code snippet.

(For anyone's interest, I did manage to find a third party library which extends the functionality you've mentioned: https://toruskit.com/docs/utilities/shadows/ - search for "Shadow color (glow)".