Gradient text in Safari

by Logan Garcia

HTML

<h2 class="gradient">Doesn't work</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<hr />

<h2 class="gradient">Shouldn't work&#8203;</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<hr />

<div class="special-heading">
	<h2>Works!</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

CSS

@import url('https://fonts.googleapis.com/css?family=Titillium+Web:200,200i,300,300i,400,400i,600,600i,700,700i,900');

body {
	font-family: 'Titillium Web',Helvetica Neue,Helvetica,Roboto,Arial,sans-serif!important;
}

h2.gradient {
	position: relative;
	color: #013c65;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 2em;
	line-height: 1em;
	background: linear-gradient(1deg, #800909, #332222);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-background-clip: text;
	-moz-text-fill-color: transparent;
	-ms-background-clip: text;
	-ms-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}
h2.gradient:after {
	content: '';
	position: relative;
	display: block;
	height: .12em;
	width: 2.5em;
	background-image: linear-gradient(1deg, #800909, #332222);
	top: .5em;
}

.special-heading h2 {
	color: #013c65;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 2em;
	line-height: 1em;
	background: linear-gradient(1deg, #800909, #332222);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-background-clip: text;
	-moz-text-fill-color: transparent;
	-ms-background-clip: text;
	-ms-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}
.special-heading:after {
	content: '';
	position: relative;
	display: block;
	height: .25em;
	width: 5em;
	background: linear-gradient(1deg, #800909, #332222);
	margin-top: .5em;
	margin-bottom: .5em;
}