<!-- https://texteffects.dev/posts/gold-text-effect -->

<div>
	<h1 data-heading="Winner" contenteditable>Winner</h1>
</div>

<!-- The use of data-attributes and pseudo elements presents some accessibility issues see: https://textlab.dev/posts/data-attributes-and-text-effects for more information --->

html {
	height: 100vh;
}

body {
	background: radial-gradient(ellipse at center, #443501 0%,#000000 100%);
}

div {
	display: flex;
	height: 100vh;
	align-items: center;
	justify-content: center;
}

h1 {
    background: linear-gradient(to bottom, #cfc09f 27%, #ffecb3 40%, #3a2c0f 78%); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
	font-family: 'Playfair Display', serif;
    position: relative;
	text-transform: uppercase;	
	font-size: calc(18vw + .5rem);
	margin: 0;
	font-weight: 400;
}

h1::after {
    background: none;
    content: attr(data-heading) / "";
    left: 0;
	top: 0;
    z-index: -1;
    position: absolute;
    text-shadow: 
		-1px 0 1px #c6bb9f, 
		0 1px 1px #c6bb9f, 
		5px 5px 10px rgba(0, 0, 0, 0.4),
		-5px -5px 10px rgba(0, 0, 0, 0.4);
}

// JS is to make the text editable for demo purpose, not required for the effect. Thanks for the suggestion @chriscoyier! 
var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
    this.setAttribute("data-heading", this.innerText);
});

 window.addEventListener('keydown',function(e) {
        if (e.keyIdentifier=='U+000A' || e.keyIdentifier=='Enter' || e.keyCode==13) {
                e.preventDefault();
                return false;
        }
}, true);