From 98b1e362fae204b7db438154afdc81de11e1b2e1 Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Mon, 5 Mar 2018 21:51:36 +1000
Subject: [PATCH 1/3] Add dynamic shadow

---
 snippets/dynamic-shadow.md | 94 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 snippets/dynamic-shadow.md

diff --git a/snippets/dynamic-shadow.md b/snippets/dynamic-shadow.md
new file mode 100644
index 000000000..d5ccdb8ea
--- /dev/null
+++ b/snippets/dynamic-shadow.md
@@ -0,0 +1,94 @@
+### Dynamic shadow
+
+Creates a shadow similar to `box-shadow` but based on the colors of the element itself.
+
+#### HTML
+
+```html
+<div class="dynamic-shadow-parent">
+  <div class="dynamic-shadow"></div>
+</div>
+```
+
+#### CSS
+
+```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::before {
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background: inherit;
+  top: 0.5rem;
+  filter: blur(0.4rem);
+  opacity: 0.7;
+  z-index: -1;
+}
+```
+
+#### Demo
+
+<div class="snippet-demo">
+  <div class="snippet-demo__dynamic-shadow-parent">
+    <div class="snippet-demo__dynamic-shadow"></div>
+  </div>
+</div>
+
+<style>
+.snippet-demo__dynamic-shadow-parent {
+  position: relative;
+  z-index: 1;
+}
+.snippet-demo__dynamic-shadow {
+  position: relative;
+  width: 10rem;
+  height: 10rem;
+  background: linear-gradient(75deg, #6d78ff, #00ffb8);
+}
+.snippet-demo__dynamic-shadow::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: inherit;
+  top: 0.5rem;
+  filter: blur(0.4rem);
+  opacity: 0.7;
+  z-index: -1;
+}
+</style>
+
+#### 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.
+
+1. `position: relative` on the parent establishes a Cartesian positioning context for child elements.
+2. `z-index: 1` establishes a new stacking context.
+3. `position: relative` on the child establishes a positioning context for pseudo-elements.
+4. `::after` defines a pseudo-element.
+5. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
+6. `width: 100%` and `height: 100%` sizes the pseudo-element to fill its parent's dimensions, making it equal in size.
+7. `background: inherit` causes the pseudo-element to inherit the linear gradient specified on the element.
+8. `top: 0.5rem` offsets the pseudo-element down slightly from its parent.
+9. `filter: blur(0.4rem)` will blur the pseudo-element to create the appearance of a shadow underneath.
+10. `opacity: 0.7` makes the pseudo-element partially transparent.
+11. `z-index: -1` positions the pseudo-element behind the parent.
+
+#### Browser support
+
+<span class="snippet__support-note">✅ No caveats.</span>
+
+* https://caniuse.com/#feat=css-filters
+
+<!-- tags: visual -->

From 948c8742d76865a369da26a8ad38e5bdc0b85fc2 Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Mon, 5 Mar 2018 21:53:27 +1000
Subject: [PATCH 2/3] ::before -> ::after

---
 snippets/dynamic-shadow.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/snippets/dynamic-shadow.md b/snippets/dynamic-shadow.md
index d5ccdb8ea..eee20986d 100644
--- a/snippets/dynamic-shadow.md
+++ b/snippets/dynamic-shadow.md
@@ -23,7 +23,7 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
   height: 10rem;
   background: linear-gradient(75deg, #6d78ff, #00ffb8);
 }
-.dynamic-shadow::before {
+.dynamic-shadow::after {
   content: '';
   width: 100%;
   height: 100%;

From b4cdfd22f226a9eadcb83a7bce2923e979715e26 Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Mon, 5 Mar 2018 21:59:58 +1000
Subject: [PATCH 3/3] Support note

---
 snippets/dynamic-shadow.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/snippets/dynamic-shadow.md b/snippets/dynamic-shadow.md
index eee20986d..59b447275 100644
--- a/snippets/dynamic-shadow.md
+++ b/snippets/dynamic-shadow.md
@@ -87,7 +87,7 @@ will be positioned underneath the element itself while still being visible.
 
 #### Browser support
 
-<span class="snippet__support-note">✅ No caveats.</span>
+<span class="snippet__support-note">⚠️ Requires prefixes for full support.</span>
 
 * https://caniuse.com/#feat=css-filters