diff --git a/source/_patterns/00-atoms/01-text/text-shadow.mustache b/source/_patterns/00-atoms/01-text/text-shadow.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..9996cb32ea85f7b927009c7cd88579f0e7475b7d
--- /dev/null
+++ b/source/_patterns/00-atoms/01-text/text-shadow.mustache
@@ -0,0 +1,7 @@
+<div>
+  <h1 class="head-alt-xl text-shadow-xs">{{ headline.short }}</h1>
+  <h1 class="head-alt-xl text-shadow-sm">{{ headline.short }}</h1>
+  <h1 class="head-alt-xl text-shadow">{{ headline.short }}</h1>
+  <h1 class="head-alt-xl text-shadow-md">{{ headline.short }}</h1>
+  <h1 class="head-alt-xl text-shadow-lg">{{ headline.short }}</h1>
+</div>
diff --git a/source/css/atoms/text-shadow.pcss b/source/css/atoms/text-shadow.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..a58552805bb635856bfaf3177971d8468c8d9955
--- /dev/null
+++ b/source/css/atoms/text-shadow.pcss
@@ -0,0 +1,17 @@
+@responsive {
+  .text-shadow-xs {
+    text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
+  }
+  .text-shadow-sm {
+    text-shadow: 1px 1px .25rem rgba(0, 0, 0, 0.3)
+  }
+  .text-shadow {
+    text-shadow: 1px 1px .25rem rgba(0, 0, 0, 0.3);
+  }
+  .text-shadow-md {
+    text-shadow: 1px 1px .5rem rgba(0, 0, 0, 0.5);
+  }
+  .text-shadow-lg {
+    text-shadow: 1px 1px .5rem rgba(0, 0, 0, 0.8);
+  }
+}
diff --git a/source/css/style.pcss b/source/css/style.pcss
index 9b5561d103de047b049a76ee8186378f8c638e4f..bac8477a4816860a3ba36a642d6e223830b0b0d9 100644
--- a/source/css/style.pcss
+++ b/source/css/style.pcss
@@ -36,6 +36,7 @@
 @import "./atoms/social-icon.pcss";
 @import "./atoms/super-button.pcss";
 @import "./atoms/table.pcss";
+@import "./atoms/text-shadow.pcss";
 @import "./atoms/tooltip.pcss";
 
 @import "./molecules/article-card.pcss";