Creating Colourful, Sensible Shadows

A bona fide CSS trick from Kirupa Chinnathambi right here. To match a coloured shadow with the colours within the background-image of a component, you inherit the background in a pseudo-element, kick it behind the unique, then blur and filter it.

.colorfulShadow {
place: relative;
}

.colorfulShadow::after {
content material: “”;
width: 100%;
top: 100%;
place: absolute;
background: inherit;
background-position: middle middle;
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
z-index: -1;
}

Unfavorable z-index is all the time a yellow flag for me as that solely works if there are not any middleman backgrounds. However the trick holds. There would all the time be another solution to layer the backgrounds (like a <span> or no matter).

For some purpose this made me consider a demo I noticed (I can’t bear in mind who to credit score!). Emojis had text-shadow on them, which actually made them pop. And people shadows may be colorized to an analogous impact.

Direct Hyperlink to Article — Permalink

The publish Creating Colourful, Sensible Shadows appeared first on CSS-Tips.

You possibly can help CSS-Tips by being an MVP Supporter.