CodePen Embed - A quick shot of gradient text and text-shadow

<body>
<header>
<h1>Art direction for the web</h1>
<h1>Art direction for the web</h1>
<h1 data-text="Art direction for the web">Art direction for the web</h1>
<h1 data-text="Art direction for the web">Art direction for the web</h1>
<h1 data-text="Art direction for the web">Art direction for the web</h1>
</header>
</body>

@import url('https://fonts.googleapis.com/css?family=Montserrat:700');

/* Only background-color and background-image are relevant to this example. */

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #fa691a;
background-image: linear-gradient(135deg, #fa691a 0%, #d72263 50%); }

h1 {
margin-bottom: .5em;
font-family: Montserrat, sans-serif;
font-size: 5rem;
color: #e0354d; }

/* 1st: Solid color and RGBA text-shadow. */

h1:nth-of-type(1) {
text-shadow: -1px -1px 0 rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.25), 3px 3px 3px rgba(0,0,0,.25), 10px 10px 20px rgba(0,0,0,.5), 20px 40px 40px rgba(0,0,0,.5); }

/* 2nd: Transparent text-fill means text-shadow shows through. */

h1:nth-of-type(2) {
background-image: linear-gradient(135deg, #fa691a 0%, #d72263 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: -1px -1px 0 rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.25), 3px 3px 3px rgba(0,0,0,.25), 10px 10px 20px rgba(0,0,0,.5), 20px 40px 40px rgba(0,0,0,.5); }

/* 3rd: Move text-shadow to a :before pseudo element. */

h1:nth-of-type(3) {
position: relative;
background-image: linear-gradient(135deg, #fa691a 0%, #d72263 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }

h1:nth-of-type(3):before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
z-index: -1;
text-shadow: -1px -1px 0 rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.25), 3px 3px 3px rgba(0,0,0,.25), 10px 10px 20px rgba(0,0,0,.5), 20px 40px 40px rgb(0,0,0); }

/* 4th: Move secondary text-shadow to an :after pseudo element using mix-blend-mode. */

h1:nth-of-type(4) {
position: relative;
background-image: linear-gradient(135deg, #fa691a 0%, #d72263 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }

h1:nth-of-type(4):before,
h1:nth-of-type(4):after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0; }

h1:nth-of-type(4):before {
z-index: -1;
text-shadow: -1px -1px 0 rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.25), 3px 3px 3px rgba(0,0,0,.25); }

h1:nth-of-type(4):after {
z-index: -2;
text-shadow: 10px 10px 20px rgba(0,0,0,.5), 20px 40px 40px #a51d50;
mix-blend-mode: multiply; }

/* 5th: Experimenting with text-stroke. */

h1:nth-of-type(5) {
position: relative;
background-image: linear-gradient(135deg, #fa691a 0%, #d72263 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: .5px rgba(255,255,255,.5); }

h1:nth-of-type(5):before,
h1:nth-of-type(5):after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0; }

h1:nth-of-type(5):before {
z-index: -1;
text-shadow: 1px 1px 0 rgba(0,0,0,.25), 3px 3px 3px rgba(0,0,0,.25); }

h1:nth-of-type(5):after {
z-index: -2;
text-shadow: 10px 10px 20px rgba(0,0,0,.5), 20px 40px 40px #a51d50;
mix-blend-mode: multiply; }

This Pen is owned by Andy Clarke on CodePen.

See more by @itshardboiled on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.