PATTERN
KNOCKOUT
A diagonal mask perforates the background into stripes and a radial mask on the after layer darkens the edges into a vignette. The content box gets its own soft screen-blended glow behind the text, masked to a circle, and a color-burn tint in front.
Code
<style>
.pattern-knockout {
--steam-block-media-aspect-ratio: 2 / 1;
--steam-block-background: #48b4ce;
--steam-block-media-mask: url("diagonal.svg") 0 0/100px 100px repeat;
--steam-block-media-transform: rotate(-35deg) scale(2);
--steam-block-media-after-background: #316099;
--steam-block-media-after-mask: radial-gradient(circle at center center, rgb(0 0 0 / 86%), rgb(0 0 0) 100%);
--steam-block-content-before-background: #e31414;
--steam-block-content-before-blend-mode: screen;
--steam-block-content-before-mask: radial-gradient(circle at center center, rgb(0 0 0 / 82%) 30%, rgb(255 255 255 / 0%) 60%);
--steam-block-content-after-background: #c8b357;
--steam-block-content-after-blend-mode: color-burn;
--steam-block-content-after-mask: url("diagonal.svg") 0 0/175px 175px repeat;
}
/* Let the content layers span the whole hero, not just the text box */
.pattern-knockout::part(content) {
position: static;
}
</style>
<steam-block class="pattern-knockout" type="hero" overlay="true">
<img slot="media" src="photo.jpg" alt="">
<div slot="content"><h1>Pattern knockout</h1></div>
</steam-block>