Dynamic mask

dabblet.css

/*
* Dynamic mask
*/


.masked {
	width: 100px;
	height: 100px;
	background: red;
	mask-image:
/* stanga sus */
-webkit-gradient(linear, right bottom, left top,
color-stop(0.00,  rgba(0,0,0,1)),
color-stop(0.2499,  rgba(0,0,0,1)),
color-stop(0.25,  rgba(0,0,0,0)),
color-stop(1.00,  rgba(0,0,0,0))),


/* dreapta sus */
-webkit-gradient(linear, left bottom, right top,
color-stop(0.00,  rgba(0,0,0,1)),
color-stop(0.2499,  rgba(0,0,0,1)),
color-stop(0.25,  rgba(0,0,0,0)),
color-stop(1.00,  rgba(0,0,0,0))),

/* stanga jos */	
-webkit-gradient(linear, right top, left bottom,
color-stop(0.00,  rgba(0,0,0,1)),
color-stop(0.2499,  rgba(0,0,0,1)),
color-stop(0.25,  rgba(0,0,0,0)),
color-stop(1.00,  rgba(0,0,0,0))),

/* dreapta jos */	
-webkit-gradient(linear, left top, right bottom,
color-stop(0.00,  rgba(0,0,0,1)),
color-stop(0.2499,  rgba(0,0,0,1)),
color-stop(0.25,  rgba(0,0,0,0)),
color-stop(1.00,  rgba(0,0,0,0)));


mask-repeat: no-repeat;
mask-position: -50px -50px, 50px -50px, -50px 50px, 50px 50px;

}

dabblet.html

<div class="mask"></div>
<div class="masked">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}