CSS filter() 함수

<div class="wrap"><div class="stage"><div class="photo" id="p"></div></div><div class="label" id="l">filter: none</div></div>

.wrap{position:relative;display:grid;place-items:center}
.stage{width:min(72vmin,320px);aspect-ratio:4/3;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.photo{position:absolute;inset:0;transition:filter .5s ease;background:
  radial-gradient(circle at 28% 30%,#ffd166 0 16%,transparent 17%),
  radial-gradient(circle at 70% 65%,#f25c8a 0 12%,transparent 13%),
  linear-gradient(180deg,#5b5bf7 0%,#18c29c 60%,#0d0d12 100%)}
.label{position:absolute;left:10px;bottom:10px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:600 12px/1.4 monospace}

const FILTERS = ['blur(6px)','brightness(1.7)','contrast(2)','grayscale(1)','hue-rotate(140deg)','invert(1)','sepia(1)','saturate(3.5)'];
const p = document.getElementById('p');
const l = document.getElementById('l');
let i = 0;
function apply(){ const css = FILTERS[i]; p.style.filter = css; l.textContent = 'filter: ' + css; i = (i + 1) % FILTERS.length; }
apply();
setInterval(apply, 1400);