gog

dabblet.css

.root {
	padding: 20px;
	position: relative;
}
.root .child {
	display: inline-block;
	width: 45%;
	height: 600px;
	background-color: #fff;
	position: relative;
}
.root .child:nth-child(odd) {
	background-image: linear-gradient(right, #f0f0f0 0%, #fff 25%);
	box-shadow: inset -1px 0 0 #ddd, inset -10px 0 10px rgba(255,255,255,.75);
}
.root .child:nth-child(even) {
	background-image: linear-gradient(left, #e9e9e9 0%, #eee 5%, #fff 25%);
	border-left: 1px solid #fff;	
}
.root .child:nth-child(odd):before {
	content: "";
	display: block;
	position: relative;
	left: 50%;
	z-index: 10;
	height: 50px;
	background-image: radial-gradient(50% 0%, ellipse, #fff, rgba(255,255,255,0) 50%);
}
.root .child:nth-child(even):after {
	content: "";
	display: block;
	position: relative;	
	top: 550px;
	left: -50%;
	z-index: 10;
	height: 50px;
	background-image: radial-gradient(50% 100%, ellipse, #fff, rgba(255,255,255,0) 50%);
}

/* gog */
/*
body { background: #ddd; }
.root {
	padding: 10px;
}
.root .child {
	width: 45%;
	display: inline-block;
	height: 600px;
	background-color: #ddd
}
.root .child:nth-child(odd) {
	background-image: linear-gradient(right, #eee 0%, #ddd 25%);
	box-shadow: inset -2px 0 4px rgba(255,255,255,.9);
}
.root .child:nth-child(even) {
	background-image: linear-gradient(left, #ccc 0%, #ddd 25%);
	box-shadow: inset 10px 0 15px rgba(0,0,0,.01);
}
*/

dabblet.html

<div class="root"><div class="child"></div><div class="child"></div></div>

settings.json

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