Un truco CSS auténtico de Kirupa Chinnathambi aquí. Para hacer coincidir una sombra de color con los colores del background-image de un elemento, tu inherit el fondo en un pseudoelemento, póngalo detrás del original, luego difumínelo y fíltrelo.
.colorfulShadow {
position: relative;
}
.colorfulShadow::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: inherit;
background-position: center center;
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
z-index: -1;
}Negativo z-index Siempre es una bandera amarilla para mí, ya que solo funciona si no hay antecedentes intermediarios. Pero el truco se mantiene. Siempre habría alguna otra forma de superponer los fondos (como un <span> o lo que sea).
Por alguna razón, esto me hizo pensar en una demostración que vi (¡no recuerdo a quién atribuir el crédito!). Los emojis tenían text-shadow en ellos, lo que realmente los hizo explotar. Y esas sombras también se pueden colorear con un efecto similar.
Enlace directo →