<main>
	<div class=slit-shadow></div>
	<div class=slit-cover></div> 
</main>
.slit-shadow{
	height: 350px;
	width: 3px;
	background: linear-gradient(to bottom, beige, orange, black, orange, beige);
	filter: blur(6px);
	transform: translatex(-25px);
}
.slit-cover{
	height: inherit;
	background:inherit;
	width: 50%;
	transform: translatex(calc(-50% - 25px));
	display:grid;
	align-items:center;
	justify-items: center;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

main>div{
	grid-area: 1 / 1;
}
main{
	width: 300px;
	height: 400px;
	display: grid;
	align-items: center;
	justify-items: center;
	background: beige;	
}
body{
	height: 100vh;
	display: grid;
	align-items: center;
	justify-items: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.