Creando sombras coloridas e inteligentes

Un auténtico truco de CSS de Kirupa Chinnathambi aquí. Para hacer coincidir una sombra de color con los colores de background-imageun elemento, coloca inheritel fondo en un pseudoelemento, colócalo detrás del original, luego difumina y filtra.

.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;}

Lo negativo z-indexsiempre es una señal de alerta para mí, ya que solo funciona si no hay antecedentes intermediarios. Pero el truco se mantiene. Siempre habrá alguna otra forma de superponer los fondos (como una spano lo que sea).

Por alguna razón, esto me hizo pensar en una demostración que vi (¡no recuerdo a quién darle crédito!). Tenían emojis text-shadow, lo que realmente los hizo resaltar. Y esas sombras también podrían colorearse para lograr un efecto similar.