Creating Colorful, Smart Shadows with CSS
This tutorial explains how to use HTML, CSS pseudo‑elements, filters, and animations to generate dynamic, colorful shadows behind images, replicating smart‑shadow effects without JavaScript, and provides reusable code snippets for various use cases.
A few days ago the author noticed a large display at Home Depot that projected colorful shadows behind TV‑mounted smart bulbs, mimicking the on‑screen content. Inspired, the article shows how to recreate this effect purely with CSS.
The HTML consists of a parent <div class="parent"> containing a child <div class="colorfulShadow sushi"></div> . The .sushi class sets the image size, background image, and other properties:
.sushi {
margin: 100px;
width: 150px;
height: 150px;
background-image: url("https://www.kirupa.com/icon/1f363.svg");
background-repeat: no-repeat;
background-size: contain;
}To create the colorful shadow, a pseudo‑element ::after is added to the .colorfulShadow container. The pseudo‑element inherits the background, covers the full size, and applies a filter combining drop-shadow and blur :
.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;
}For an animated pulsing effect, an animation rule is added that scales the pseudo‑element between 1 and 1.3 using a custom @keyframes oscillate definition:
.colorfulShadow {
/* ...previous rules... */
animation: oscillate 1s cubic-bezier(.17,.67,.45,1.32) infinite alternate;
}
@keyframes oscillate {
from { transform: scale(1, 1); }
to { transform: scale(1.3, 1.3); }
}The article notes that the same technique can be applied to any element (e.g., buttons or combo boxes) by using JavaScript to duplicate elements when needed, though pure CSS is preferred for simplicity.
In the “Extension” section, the author shows a minimal approach where any element can receive the effect by adding a style attribute with custom CSS variables for image URL, width, and height, and applying the .shadowedImage class with the same pseudo‑element rules.
.shadowedImage {
position: relative;
margin: 100px;
width: var(--data-width);
height: var(--data-height);
max-height: 150px;
background-image: var(--data-image);
background-repeat: no-repeat;
background-size: contain;
}
.shadowedImage::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;
}A complete HTML example is provided, showing the <!doctype html> document with the CSS embedded in a <style> block and several .shadowedImage elements with different data attributes to demonstrate the effect.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colorful Shadows Demo</title>
<style>
/* CSS from above */
</style>
</head>
<body>
<div class="parent">
<div class="shadowedImage" style="--data-width:164px; --data-height:48px; --data-image:url('...svg');"></div>
<div class="shadowedImage" style="--data-width:164px; --data-height:164px; --data-image:url('...jpg');"></div>
<div class="shadowedImage" style="--data-width:164px; --data-height:164px; --data-image:url('...jpg');"></div>
</div>
</body>
</html>The article concludes that pseudo‑elements enable CSS‑only visual effects that previously required JavaScript, though flexibility may be limited for more complex scenarios.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.