Dynamic shadow-CSS examples

Dynamic shadow-CSS examples, someone asked me to explain?

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


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


.dynamic-shadow-parent {
 .dynamic-shadow {
    backgroundlinear-gradient(75deg, #6d78ff, #00ffb8);
     .dynamic-shadow::after {

Dynamic shadow-CSS examples


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.

Post your comments / questions