.backdrop {
	width: 400px;
	height: 240px;
	overflow: hidden;
	border-radius: 20px;
	background: center / cover no-repeat
			url("https://images.unsplash.com/photo-1531685250784-7569952593d2?w=500&q=60"),
		url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'> <foreignObject width='400px' height='240px'> <div xmlns='http://www.w3.org/1999/xhtml' style='font: bolder 720pt/220pt monospace;color:transparent;text-shadow: 0 0 40px floralwhite;background: rgba(0, 0, 0, 0.3);'>🌾</div> </foreignObject> </svg>"),
		url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'> <foreignObject width='400px' height='240px'> <div xmlns='http://www.w3.org/1999/xhtml' style='font: bolder 720pt/220pt monospace;color:transparent;text-shadow: 0 0 40px floralwhite;background: rgba(0, 0, 0, 0.3);'>🍃</div> </foreignObject> </svg>");
	background-blend-mode: multiply;
	filter: brightness(1.3);
}

.backdrop > * {
	grid-area: 1/1;
}

body,
.backdrop {
	display: grid;
}

body {
	margin: 0;
	align-items: center;
	justify-items: center;
	height: 100vh;
}

/* for chrome */

@supports(-webkit-app-region:none) {
	.backdrop {
		background: center / cover no-repeat
			url("https://images.unsplash.com/photo-1531685250784-7569952593d2?w=500&q=60"),
		url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'> <foreignObject width='400px' height='240px'> <div xmlns='http://www.w3.org/1999/xhtml' style='font: bolder 720pt/220pt monospace;color:transparent;text-shadow: 0 0 6px floralwhite;background: rgba(0, 0, 0, 0.3);'>🌾</div> </foreignObject> </svg>"),
		url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'> <foreignObject width='400px' height='240px'> <div xmlns='http://www.w3.org/1999/xhtml' style='font: bolder 720pt/220pt monospace;color:transparent;text-shadow: 0 0 6px floralwhite;background: rgba(0, 0, 0, 0.3);'>🍃</div> </foreignObject> </svg>");
	}
}
/* firefox */
@supports (-moz-user-focus:none){
	.backdrop{
		filter: brightness(1.1)
	}
}

/* this is a demo code only */