Cut out

[CSS] 잘라낸 텍스트 만들기 / 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.