Creates a shadow similar to box-shadow
but based on the colors of the element itself.
position: relative
on the element establishes a Cartesian positioning context for psuedo-elements.z-index: 1
establishes a new stacking context.:after
defines a pseudo-element.position: absolute
takes the pseudo element out of the flow of the document and positions it in relation to the parent.width: 100%
andheight: 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.5rem
offsets 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.7
makes the pseudo-element partially transparent.z-index: -1
positions the pseudo-element behind the parent but in front of the background.
预览
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;
}