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% 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.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.

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

.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;
                                                          }