Dynamic shadow-CSS examples

Create a shadow similar to the one box-shadow based on the color of the element itself.

HTML CODE:

<div class="dynamic-shadow-parent">
    <div class="dynamic-shadow"></div>
</div>

CSS CODE:

.dynamic-shadow-parent {
    position: relative;
    z-index: 1;
}
 .dynamic-shadow {
    position: relative;
    width: 10rem;
    height: 10rem;
    background: linear-gradient(75deg, #6d78ff, #00ffb8);
}
     .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;
    }

Description

Code snippets require some complicated situations to properly stack the context so that the pseudo-elements will be positioned below the element itself while still being visible.

1. position: relative A Cartesian positioning context is established for the child elements on the parent element.
2. z-index: 1 Create new stacked content.
3. position: relative The positioning context of the pseudo-element is established on the child.
4. ::after Define pseudo elements.
5. position: absolute Takes a pseudo-element from the document stream and positions it relative to the parent element.
6. width: 100% And height: 100% Resize the pseudo-element to fill the dimensions of its parent element to make them equal in size.
7. background: inherit Causes a pseudo-element to inherit the linear gradient specified on the element.
8. top: 0.5rem Pseudo-element is slightly offset from its parent element.
9. filter: blur(0.4rem) Blur the pseudo-element to create the appearance of the shadow below.
10. opacity: 0.7 Make the pseudo-element part transparent.
11. z-index: -1 Position the pseudo-element behind the parent element.