블렌드 모드

<div class="wrap"><div class="stage"><div class="c a"></div><div class="c b" id="b"></div></div><div class="tag" id="tag">multiply</div></div>

.wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.stage{position:relative;width:180px;height:110px;background:#eceef2;border-radius:14px;overflow:hidden}
.c{position:absolute;width:90px;height:90px;border-radius:50%}
.a{background:#ff8a3d;left:10px;top:10px}
.b{background:#5b5bf7;left:60px;top:10px;mix-blend-mode:multiply;animation:drift 3s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(10px,8px)}}
.tag{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--muted);letter-spacing:.02em}

const b = document.getElementById('b');
const tag = document.getElementById('tag');
const modes = ['multiply', 'screen', 'overlay', 'difference', 'color-dodge', 'normal'];
let i = 0;
setInterval(() => { i = (i + 1) % modes.length; b.style.mixBlendMode = modes[i]; tag.textContent = modes[i]; }, 1800);