<section>
  <div></div>
  <div></div>
</section>
section {
	display: grid;
	align-items: center;
	justify-items: center;
	width: 500px;
	height: 500px;
}
section > div {
	width: inherit;
	height: inherit;
	grid-area: 1 / 1;
}
div:nth-child(1) {
	background: linear-gradient(to right, red, orange);
}
div:nth-child(2) {
	--gt: linear-gradient(black, black);
	--n: 100px;
	--h: calc(var(--n) - 5px);
	background: 
		var(--gt) top right, 
		var(--gt) top var(--n) right,
		var(--gt) top calc(var(--n) * 2) right, 
		var(--gt) top calc(var(--n) * 3) right,
		var(--gt) top calc(var(--n) * 4) right, 
		white;
	background-repeat: no-repeat;
	background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
	mix-blend-mode: screen;
}


body  {
	display: grid;
	align-items: center;
	justify-items: center;
	height: 100vh;
	margin: 0;
}
@media (max-width:500px){
	section {
		width: 90vw;
		transform: scale(.9);
	}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.