Градиент CSS для текста

Пример наложения градиентной заливки на текст с помощью CSS3, работает в браузерах Safari и Chrome

HTML

<h1 data-text="SHURAVI" >SHURAVI</h1>

CSS

@import url(http://fonts.googleapis.com/css?family=Coda+Caption:800);
/* CSS text gradients */
h1{
    font-size: 70px;
    font-family: 'Coda Caption', sans-serif;
    background-image: linear-gradient(to bottom, rgba(238,198,87,1) 0%, rgba(129,103,36,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    
}
h1[data-text] {
	position: relative;
}
h1[data-text]::after {
	content: attr(data-text);
	z-index: 10;
	color: #e3e3e3;
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: 0px 0px 16.92px 1.08px rgba(233, 194, 85, 0.35);
}