Diagonally colored text, with fallback

dabblet.css

/**
 * Diagonally colored text, with fallback
 * Inspired from http://servicedesigndays.com/
 */

h1 {
	max-width: 4.5em;
	font: bold 300%/1 Helvetica Neue, sans-serif;
	color: white;
}

@supports (-webkit-background-clip: text) {
	h1 {
		color: transparent;
		background: linear-gradient(315deg, #262350 50%, white 0);
		-webkit-background-clip: text;
	}
}

body {
	background: #00EDFF
}

dabblet.html

<h1>SERVICE DESIGN DAYS</h1>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"110","seethrough":"","prefixfree":"","page":"css"}