[CSS] 잘라낸 텍스트 만들기 / Cut out Text

Cut out Text

위의 사진과 같은 텍스트를 컷아웃(Cut out) 텍스트라고 합니다.

CSS로 위와 같은 효과를 만드는 방법을 알아보겠습니다.

 

.cut-out-text {
  mix-blend-mode: screen;
}

가장 중요한건 mix-blend-mode: screen; 입니다.

텍스트에 배경을 믹스할 때 이러한 속성을 사용합니다.

 

screen은 이미지 합성 방식입니다.

포토샵을 잘 다루고 익숙하신 분들은 아시겠지만, 속성이 많습니다.

이 부분은 차후 다루겠습니다.

 

 

그라디언트 배경

See the Pen Cut Out Text by wooncloud (@wooncloud) on CodePen.

 

 

사진 배경

See the Pen Cut Out Text2 by wooncloud (@wooncloud) on CodePen.