Creating Colourful, Sensible Shadows

No Comments

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.

CodePen Embed Fallback

Direct Hyperlink to ArticlePermalink

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

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

    About us and this blog

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment