Design Kits Blog

CSS의 filter 속성은 요소에 그래픽 효과를 적용하는 데 사용됩니다. 

이 속성을 통해 이미지나 요소에 다양한 시각적 효과를 줄 수 있습니다. 

1. blur(px)

설명: 요소에 흐림(블러) 효과를 적용합니다. 값은 픽셀 단위로, 값이 클수록 더 흐릿하게 보입니다.

사용 예: 이미지를 흐리게 하여 포커스를 다른 곳에 두거나, 배경을 흐리게 만들 때 유용합니다.

예시: filter: blur(5px); → 5px 만큼 흐림 효과를 적용.

2. brightness(%)

설명: 요소의 밝기를 조정합니다. 100%는 원본 밝기이며, 0%는 완전 어두운 상태입니다.

사용 예: 이미지나 배경의 밝기를 조절하여 눈에 띄게 만들거나, 어두운 화면을 밝게 할 때 사용합니다.

예시: filter: brightness(150%); → 밝기를 150%로 증가시킴.

3. contrast(%)

설명: 요소의 대비를 조정합니다. 100%가 원본 대비이며, 0%는 회색으로 변하고, 200%는 대비가 두 배로 증가합니다.

사용 예: 대비를 강화해 이미지를 더욱 선명하게 만들 때 유용합니다.

예시: filter: contrast(200%); → 대비를 200%로 증가시킴.

4. grayscale(%)

설명: 요소를 흑백(그레이스케일)으로 변환합니다. 100%는 완전히 흑백이고, 0%는 원본 색상 그대로입니다.

사용 예: 흑백 이미지 효과를 주거나, 색상을 최소화할 때 사용합니다.

예시: filter: grayscale(100%); → 완전 흑백 처리.

5. hue-rotate(deg)

설명: 요소의 색조를 회전시켜 색상을 변경합니다. 값은 도(degrees)로 나타내며, 360도 회전시 원본 색상으로 돌아옵니다.

사용 예: 색상을 회전시켜 색상 변화를 시도하거나, 특정 색상 계열로 바꾸고 싶을 때 사용합니다.

예시: filter: hue-rotate(90deg); → 색상을 90도 회전.

6. invert(%)

설명: 요소의 색상을 반전시킵니다. 100%는 색상이 완전히 반전되고, 0%는 원본 색상 그대로입니다.

사용 예: 다크모드나 네거티브 효과를 적용할 때 사용합니다.

예시: filter: invert(100%); → 색상을 완전히 반전.

7. opacity(%)

설명: 요소의 불투명도를 설정합니다. 100%는 완전히 불투명하고, 0%는 완전히 투명한 상태입니다.

사용 예: 투명한 배경을 설정하거나, 요소의 투명도를 조정할 때 사용합니다.

예시: filter: opacity(50%); → 불투명도를 50%로 설정.

8. saturate(%)

설명: 요소의 채도를 조정합니다. 100%는 원본 채도이며, 0%는 흑백, 200%는 채도를 두 배로 증가시킵니다.

사용 예: 색상이 더 선명하거나 더 흐릿하게 보이도록 할 때 사용합니다.

예시: filter: saturate(200%); → 채도를 200%로 증가.

9. sepia(%)

설명: 요소에 세피아 톤(갈색 톤)을 적용합니다. 100%는 완전히 세피아 톤으로 변하고, 0%는 원본 상태입니다.

사용 예: 사진에 빈티지 또는 클래식한 느낌을 줄 때 사용합니다.

예시: filter: sepia(100%); → 완전 세피아 톤 적용.

10. drop-shadow(h-offset v-offset blur-radius color)

설명: 요소에 그림자를 추가합니다. h-offset과 v-offset은 그림자의 수평/수직 위치를, blur-radius는 흐림 정도를, color는 그림자의 색상을 설정합니다.

사용 예: 텍스트나 이미지를 강조하거나 부드러운 그림자 효과를 주고 싶을 때 사용합니다.

예시: filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.5)); → 그림자를 10px 오른쪽, 10px 아래로 이동하고, 20px 흐림 효과를 주며 색상은 반투명 검정.

이 필터들은 각기 다른 시각적 효과를 웹 요소에 적용할 수 있게 해주며, 특히 이미지나 버튼, 배경에 다양하게 활용할 수 있습니다. 

필터를 여러 개 동시에 사용할 수도 있어, 더욱 창의적인 디자인을 구현할 수 있습니다.

[예제]

See the Pen Untitled by designkits (@designkits) on CodePen.