<div><span>Jagged</span></div>
<div><span>Smooth</span></div>

html {
	height: 100%;
}

body {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #B298DC;
	padding: 2rem;
}

div {
	width: 47%;
	height: 250px;
	position: relative;
	
	// With decimals
	// background: linear-gradient(176deg, #A663CC, #A663CC 75%, #6F2DBD 75.3%);
	
	// With calc
	background:
 linear-gradient(176deg, #A663CC, #A663CC 75%, #6F2DBD calc(75% + 1px), #6F2DBD 100%);
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

div:first-child {
		background: linear-gradient(176deg, #A663CC, #A663CC 75%, #6F2DBD 75%);
}

span {
	position: absolute;
	top: -40px;
	width: 100%;
	text-transform: uppercase;
	color: #6F2DBD;
	text-align: center;
	font-weight: bold;
	font-size: 19px;
	
}