See: https://css-irl.info/a-utility-class-for-covering-elements/

overlay-css

* {
	box-sizing: border-box;
}

:root {
	--color: rgba(0, 0, 0, 0.55);
}

body {
	margin: 0;
	pading: 1rem;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(183, 216, 232, 1);
}

.element {
	position: relative;
	width: min(15rem, 80vw);
	height: min(15rem, 80vw);
	background-color: darkorchid;
}

/* Utility classes */
.overlay-child,
.overlay-before,
.overlay-after {
	position: relative;
}

.overlay, /* Applies to the covering element, others apply to the parent */
.overlay-child > *,
.overlay-before::before,
.overlay-after::after {
	position: absolute;
	content: '';
	display: block;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: repeating-linear-gradient(45deg, var(--color), var(--color) 0.5rem, transparent 0, transparent 1rem), rgba(0, 0, 0, 0.2);
}

overlay-html

<div class="element overlay-child">
	<div></div>
</div>