COLOR
CLASH
exclusion blend-mode inverts the photo wherever it overlaps the before layer's rounded clip-path cut; a second, larger clip-path shape on the after layer adds a difference blend on top, and the content box gets its own dark overlay tint.
Code
<style>
.color-clash {
--steam-block-background: #0a0a0a;
--steam-block-media-blend-mode: exclusion;
--steam-block-media-before-background: #fffab6;
--steam-block-media-before-clip-path: inset(3vw round 25px);
--steam-block-media-after-blend-mode: difference;
--steam-block-media-after-background: #ffffff;
--steam-block-media-after-clip-path: inset(10vw round 18px);
--steam-block-content-padding: 1rem;
--steam-block-content-border-radius: 1rem;
--steam-block-content-after-blend-mode: overlay;
--steam-block-content-after-background: rgb(0, 0, 0);
}
</style>
<steam-block class="color-clash" type="hero" overlay="true">
<img slot="media" src="photo.jpg" alt="">
<div slot="content"><h1>Color clash</h1></div>
</steam-block>