30-seconds-of-code/dynamic-shadow.md at 948c8742d76865a369da26a8ad38e5bdc0b85fc2

andre/30-seconds-of-code

Fork 0

Files

atomiks 948c8742d7 ::before -> ::after

2018-03-05 21:53:27 +10:00

2.5 KiB

Raw Blame History

Dynamic shadow

Creates a shadow similar to box-shadow but based on the colors of the element itself.

HTML

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

CSS

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

Demo

Explanation

The snippet requires a somewhat complex case of stacking contexts to get right, such that the pseudo-element will be positioned underneath the element itself while still being visible.

position: relative on the parent establishes a Cartesian positioning context for child elements.
z-index: 1 establishes a new stacking context.
position: relative on the child establishes a positioning context for pseudo-elements.
::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.

Browser support

✅ No caveats.

https://caniuse.com/#feat=css-filters

2.5 KiB Raw Blame History