CSS 시각 효과: 필터, 블렌드 모드, 클리핑, 마스킹

한눈에 보기

잘라 내거나 가려도 박스 자체는 그대로다. 레이아웃·클릭 영역은 원래 사각형을 기준으로 한다.

filter

여러 함수를 공백으로 이어 쓰며, 하나라도 잘못 쓰면 선언 전체가 무효가 된다.

.thumb:not(:hover) { filter: grayscale(1) brightness(.9); }
.glass {
  background: rgb(255 255 255 / 40%);
  backdrop-filter: blur(12px) saturate(1.4);
}

• backdrop-filter는 filter와 같은 함수를 받는다. 요소의 배경이 반투명해야 효과가 보인다.
• 효과가 지원되지 않아도 글자가 읽히도록 배경색 대비를 먼저 확보한다.
• filter와 backdrop-filter는 새 쌓임 맥락을 만들고, 조상에 filter가 있으면 position: fixed 자식의 기준이 바뀐다(CSS position과 z-index).

블렌드 모드

디자인 도구의 레이어 혼합 모드와 같다. mix-blend-mode는 요소(가상 요소 포함)를 아래 층과 섞고, background-blend-mode는 한 요소의 여러 배경 겹끼리 섞는다.

앞의 열두 가지는 R·G·B 채널을 따로 계산하는 분리형(separable), 마지막 네 가지는 색 성분을 함께 다루는 비분리형(non-separable)이다.

/* 듀오톤: 흑백 사진 위에 가상 요소 두 장을 섞는다 */
.duotone { position: relative; isolation: isolate; }
.duotone img { filter: grayscale(1) contrast(1.2); }
.duotone::before { content: ""; position: absolute; inset: 0; background: #1d3557; mix-blend-mode: lighten; }
.duotone::after  { content: ""; position: absolute; inset: 0; background: #e63946; mix-blend-mode: multiply; }

isolation: isolate는 새 쌓임 맥락을 만들어 그 안의 요소가 바깥 배경과 섞이지 않게 한다. 안쪽 요소끼리는 계속 섞인다. 배경 겹은 이미 격리돼 있어 background-blend-mode에는 영향이 없다.

이미지 효과를 거는 방법과 비용

흑백 같은 이미지 효과는 여러 방법으로 걸 수 있다. 필터는 레이아웃과 첫 페인트 뒤에 렌즈처럼 덧씌워진다.

바뀌지 않는 효과는 이미지 자체에 굽고, 상호작용이 필요한 효과만 CSS로 건다. 많은 이미지에 무거운 blur()를 걸고 애니메이션하면 프레임마다 다시 그려 느려진다.

도형과 clip-path

clip-path는 도형 안쪽만 보이게 한다. 경계에서 완전히 보이거나 완전히 안 보인다.

.avatar { clip-path: circle(50%); }
.section-slant { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }
.cut { clip-path: inset(10px 20px round 12px); }
.logo { clip-path: url(#logo-clip); }       /* SVG <clipPath> 참조. 외부 파일이면 url(shapes.svg#logo-clip) */

• 도형을 재는 기준 상자는 기본 border-box다. clip-path: inset(10px) padding-box처럼 padding-box, content-box, margin-box로 바꿀 수 있다.
• clip-path는 도형 하나만 받는다. 떨어진 여러 도형은 path()·shape()의 복합 경로, SVG <clipPath>, 또는 마스크로 만든다.
• 잘라도 안의 글은 도형을 따라 다시 흐르지 않는다.

도형 애니메이션

• clip-path는 애니메이션할 수 있다. 같은 도형 함수를 써야 하고, polygon()·shape()는 점 개수가 같아야 부드럽게 바뀐다.
• offset-path에 같은 도형이나 ray(각도)를 주고 offset-distance를 0%→100%로 움직이면 요소가 경로를 따라 이동한다.

마스킹

마스크는 이미지·그라디언트·SVG <mask>의 픽셀로 보이는 정도를 정한다. 반투명이 가능하다는 점이 clip-path와 다르다.

.fade-bottom { mask-image: linear-gradient(black 70%, transparent); }   /* 아래로 갈수록 사라짐 */
.multi {
  mask: url(star.svg) center / 40% no-repeat luminance,
        linear-gradient(90deg, black, transparent) alpha;
}

값 목록이 마스크 개수보다 짧으면 반복해 채우고, 길면 남는 값은 버린다. 축약형 mask는 순서대로 image, mode, position / size, repeat, origin, clip, composite를 받고, 빠진 값은 초깃값으로 돌아간다.

마스크로 만드는 반사

요소 아래에 거울에 비친 듯한 상을 붙이는 표준 속성은 없다. -webkit-box-reflect는 Chromium·Safari만 지원하는 비표준 속성이고 Firefox는 지원하지 않는다.

.logo { -webkit-box-reflect: below 4px linear-gradient(transparent 60%, rgb(0 0 0 / .3)); }

모든 브라우저에서 같게 보여야 하면 위의 마스크를 쓴다. 가상 요소에 같은 이미지를 배경으로 넣고 scale: 1 -1로 뒤집은 뒤 mask-image 그라디언트로 아래쪽을 흐리게 한다. 내용이 바뀌는 요소라면 반사를 포기하는 편이 낫다.

shape-outside: 글이 도형을 따라 흐르게

clip-path로 원형을 만들어도 float 주변 글은 원래 사각형을 피해 흐른다. shape-outside로 흐름 경계를 따로 준다.

.portrait {
  float: inline-start;
  width: 12rem; aspect-ratio: 1;
  clip-path: circle(50%);
  shape-outside: circle(50%);
  shape-margin: 1rem;
}

• 기본 도형 함수와 이미지·그라디언트를 받는다. 이미지일 때는 shape-image-threshold로 어느 투명도부터 도형 안으로 볼지 정한다.
• path(), shape(), SVG <clipPath>는 받지 않는다.
• float된 요소에만 효과가 있다.

정리

• 요소 전체는 filter, 뒤 배경만은 backdrop-filter.
• 색을 섞으면 블렌드 모드, 섞임을 가두려면 isolation: isolate.
• 딱 떨어지는 모양이면 clip-path, 반투명 경계면 mask.
• 반응형 복잡 도형은 path() 대신 shape().
• 잘라도 박스와 흐름은 그대로다. 글이 도형을 따르게 하려면 shape-outside.
• 바뀌지 않는 이미지 효과는 이미지에 굽고, 상호작용이 필요한 것만 CSS로 건다. 캔버스 픽셀 처리가 가장 느리다.

관련 노트: CSS 테두리와 그림자, CSS 배경과 그라디언트, CSS 함수: calc()·clamp()와 수학 함수, CSS position과 z-index