Dynamic shadow
Creates a shadow similar to box-shadow
but based on the colors of the element itself.
- Use the
::after
pseudo-element withposition: absolute
andwidth
andheight
equal to100%
to fill the available space in the parent element. - Use
background: inherit
to inherit thebackground
of the parent element. - Use
top
to slightly offset the pseudo-element,filter: blur()
to create a shadow andopacity
to make it semi-transparent. - Use
z-index: 1
on the parent andz-index: -1
on the pseudo-element to position it behind its parent.
<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; }