How to create a dynamic shadow using CSS.
You can create a shadow similar to box-shadow but based on the colors of the element itself.
Brief Explanations:
position:relativeon the element establishes a Cartesian positioning context for psuedo-elements.z-index:1establishes a new stacking context.::afterdefines a pseudo-element.position:absolutetakes the pseudo element out of the flow of the document and positions it in relation to the parent.width:100%and height:100%sizes the pseudo-element to fill its parent's dimensions, making it equal in size.background: inherit causes the pseudo-element to inherit the linear gradient specified on the element.top:0.5remoffsets the pseudo-element down slightly from its parent.filter:blur(0.4rem)will blur the pseudo-element to create the appearance of a shadow underneath.opacity:0.7makes the pseudo-element partially transparent.z-index:-1positions the pseudo-element behind the parent but in front of the background.
Code Sample:
HTML
<div class="dynamic-shadow"></div>
CSS
.dynamic-shadow {
position: relative;
width: 10rem;
height: 10rem;
background: linear-gradient(75deg, #6d78ff, #00ffb8);
z-index: 1;
}
.dynamic-shadow::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
top: 0.5rem;
filter: blur(0.4rem);
opacity: 0.7;
z-index: -1;
}
Happy Coding!