CSS Mask (WebKit only)

dabblet.css

/* CSS Mask (WebKit only) */

div {
	width: 300px;
	height: 200px;
	background: red;
	mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

div:last-child {
	width: 300px;
	height: 300px;
	background: red;
	mask-image: radial-gradient(closest-side circle, rgba(0,0,0,1), rgba(0,0,0,0));
}
 
body {
	background-color:#269;
	background-image: linear-gradient(white 2px, transparent 2px),
	linear-gradient(90deg, white 2px, transparent 2px),
	linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
	linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
	background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
	background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
	/* Src: http://lea.verou.me/css3patterns/#blueprint-grid */
}

dabblet.html

<div>
	<h1>this is some text</h1>
	<h1>this is some text</h1>
	<h1>this is some text</h1>
	<h1>this is some text</h1>
</div>

<div>
	<h1>this is some text</h1>
	<h1>this is some text</h1>
	<h1>this is some text</h1>
	<h1>this is some text</h1>
</div>

settings.json

{"view":"split-vertical","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}