filter

요소에 밝기, 그레이스케일, 색상 조절 등 시각적 효과를 적용합니다. 자식 요소를 포함한 전체 렌더링 결과에 영향을 주며, backdrop-filter는 요소 뒤의 배경에만 효과를 적용합니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS	설명
`filterb5px`	filter: blur(5px)	배경 블러 5px
`filterbr150p`	filter: brightness(150%)	밝기 150% (밝게)
`filterbr80p`	filter: brightness(80%)	밝기 80% (어둡게)
`filterc120p`	filter: contrast(120%)	대비 120% (선명)
`filterc80p`	filter: contrast(80%)	대비 80% (부드럽게)
`filterg100p`	filter: grayscale(100%)	완전한 흑백
`filterg50p`	filter: grayscale(50%)	50% 흑백
`filterhr90deg`	filter: hue-rotate(90deg)	색상 90도 회전
`filterhr180deg`	filter: hue-rotate(180deg)	색상 180도 회전
`filteri100p`	filter: invert(100%)	색상 반전 (네거티브)
`filtero50p`	filter: opacity(50%)	불투명도 50%
`filtersa200p`	filter: saturate(200%)	채도 200% (선명한 색상)
`filterds2px4px8px000000`	filter: drop-shadow(2px 4px 8px #000000)	드롭 섀도우
`filterinh`	filter: inherit	부모 필터 상속
`filteru`	filter: unset	필터 초기화
`filtern`	filter: none	부모 필터 상속
`filterinit`	filter: initial	필터 초기화
`bfb5px`	backdrop-filter: blur(5px)	배경 블러 5px
`bfb12px`	backdrop-filter: blur(12px)	배경 블러 12px

패턴 구조

filter 클래스는 필터 함수의 약어 + 값 + 단위로 구성됩니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">접두사	함수	단위	예시
`filterb`	blur()	px, rem, em	filterb5px, filterb2rem, filterb0-5em
`filterbr`	brightness()	p (%)	filterbr120p, filterbr150p, filterbr80p
`filterc`	contrast()	p (%)	filterc80p, filterc120p, filterc200p
`filterg`	grayscale()	p (%)	filterg100p, filterg50p, filterg0p
`filterhr`	hue-rotate()	deg, rad, turn	filterhr90deg, filterhr180deg, filterhr270deg
`filteri`	invert()	p (%)	filteri100p, filteri50p
`filtero`	opacity()	p (%)	filtero50p, filtero80p
`filtersa`	saturate()	p (%)	filtersa200p, filtersa50p
`filters`	sepia()	p (%)	filters50p, filters100p
`filterds`	drop-shadow()	px + HEX	filterds2px4px8px000000
`filterinh`	filter: inherit	없음	filterinh
`filteru`	filter: unset	없음	filteru
`filtern`	filter: none	없음	filtern
`filterinit`	filter: initial	없음	filterinit
`bfb`	backdrop-filter: blur()	px	bfb5px, bfb12px
`bfbr`	backdrop-filter: brightness()	p (%)	bfbr80p, bfbr120p

시각적 비교

각 filter가 요소에 미치는 효과를 비교합니다.

원본 —

필터 없음. 비교 기준입니다.

Brightness 150% — filterbr150p

filterbr150p: 밝기 증가. 전체적으로 밝아집니다.

Brightness 50% — filterbr50p

filterbr50p: 밝기 감소. 전체적으로 어두워집니다.

Grayscale — filterg100p

filterg100p: 완전한 흑백. 색상 정보가 제거됩니다.

Contrast — filterc200p

filterc200p: 대비 강화. 밝은 부분은 더 밝고 어두운 부분은 더 어둡습니다.

Hue Rotate — filterhr90deg

filterhr90deg: 색상 90도 회전. 모든 색상이 변경됩니다.

Invert — filteri100p

filteri100p: 색상 반전. 네거티브 효과입니다.

Saturate — filtersa200p

filtersa200p: 채도 200%. 색상이 더 선명해집니다.

Opacity — filtero50p

filtero50p: 불투명도 50%. 반투명 효과입니다.

필터별 상세

`filterb`filter: blur()

filterb 접두사로 blur 효과를 적용합니다. 단위는 px, rem, em 등 자유롭게 사용 가능합니다. 예: filterb5px, filterb0-5rem

<!-- Blur effect -->
<div class="filterb5px">Blurred content (5px)</div>

<!-- Various blur strengths -->
<div class="filterb2px">Subtle blur (2px)</div>
<div class="filterb10px">Strong blur (10px)</div>
<div class="filterb0-5rem">Blur with rem (0.5rem)</div>

주요 클래스

`filterb2px`	filter: blur(2px)
`filterb5px`	filter: blur(5px)
`filterb10px`	filter: blur(10px)
`filterb0-5rem`	filter: blur(0.5rem)
`filterb2rem`	filter: blur(2rem)

`filterbr`filter: brightness()

요소의 밝기를 조절합니다. 100%가 원본이며, 그 이상은 밝아지고 이하는 어두워집니다. 이미지 호버 효과나 다크모드 조정에 유용합니다.

<!-- Dark overlay effect -->
<img class="filterbr50p" src="hero.jpg" />

<!-- Increase brightness on hover -->
<img class="filterbr80p hover-filterbr100p tall200msease cp" src="..." />

<!-- Bright highlight -->
<div class="filterbr150p">Brightened area</div>

주요 클래스

`filterbr50p`	filter: brightness(50%)
`filterbr80p`	filter: brightness(80%)
`filterbr100p`	filter: brightness(100%)
`filterbr120p`	filter: brightness(120%)
`filterbr150p`	filter: brightness(150%)
`filterbr200p`	filter: brightness(200%)

`filterg`filter: grayscale()

요소를 흑백으로 변환합니다. 100%면 완전한 흑백, 0%면 원본 색상입니다. 비활성 상태 표시, 호버 시 컬러 복원 효과에 자주 사용합니다.

<!-- Grayscale image (color restored on hover) -->
<img class="filterg100p hover-filterg0p tall300msease cp" src="..." />

<!-- Disabled state indicator -->
<div class="filterg100p o50">Disabled Status</div>

<!-- Partial grayscale -->
<img class="filterg50p" src="..." />

주요 클래스

`filterg0p`	filter: grayscale(0%)
`filterg25p`	filter: grayscale(25%)
`filterg50p`	filter: grayscale(50%)
`filterg75p`	filter: grayscale(75%)
`filterg100p`	filter: grayscale(100%)

`filterds`filter: drop-shadow()

요소의 실제 형태를 따르는 그림자를 추가합니다. box-shadow와 달리 투명 영역을 무시하고 콘텐츠 형태에 맞는 그림자를 생성합니다. PNG 아이콘, SVG 등에 유용합니다.

패턴

filterds{X}px{Y}px{blur}px{HEX6}

<!-- Shadow on icon -->
<svg class="filterds2px4px8px000000">...</svg>

<!-- Shadow following shape of PNG image -->
<img class="filterds4px4px10px000000" src="logo.png" />

<!-- Colored shadow -->
<div class="filterds2px4px8px6366F1">Indigo shadow</div>

예시 클래스

`filterds2px2px4px000000`	filter: drop-shadow(2px 2px 4px #000000)
`filterds2px4px8px000000`	filter: drop-shadow(2px 4px 8px #000000)
`filterds4px4px10px6366F1`	filter: drop-shadow(4px 4px 10px #6366F1)
`filterds0px0px8px000000`	filter: drop-shadow(0px 0px 8px #000000)

`bf*`backdrop-filter

요소 자체가 아닌 요소 뒤의 배경에 필터를 적용합니다. 글래스모피즘(유리 효과) 구현에 핵심이며, bf 접두사 뒤에 filter와 동일한 함수 약어를 사용합니다.

<!-- Glassmorphism (glass effect) -->
<div class="bfb12px bg255-255-255-10 br12px p2rem">
  Glass effect overlay with blurred background
</div>

<!-- Dark glass -->
<div class="bfb10px bg0-0-0-50 br8px p2rem cFFFFFF">
  Semi-transparent dark overlay
</div>

<!-- Glass effect on header -->
<header class="pf t0 l0 w100p bfb12px bg0-0-0-30 py12px px2rem zi100">
  <nav>Navigation</nav>
</header>

주요 클래스

`bfb5px`	backdrop-filter: blur(5px)
`bfb10px`	backdrop-filter: blur(10px)
`bfb12px`	backdrop-filter: blur(12px)
`bfb2rem`	backdrop-filter: blur(2rem)
`bfbr80p`	backdrop-filter: brightness(80%)
`bfbr120p`	backdrop-filter: brightness(120%)

호버 조합

transition과 함께 사용하면 부드러운 필터 전환 효과를 만들 수 있습니다.

<!-- Grayscale → color (portfolio) -->
<img class="filterg100p hover-filterg0p tall300msease cp" src="..." />

<!-- Brightness adjustment (gallery) -->
<img class="filterbr80p hover-filterbr110p tall200msease cp" src="..." />

<!-- Saturation adjustment -->
<img class="filtersa50p hover-filtersa200p tall300msease cp" src="..." />

<!-- Invert → original -->
<img class="filteri100p hover-filteri0p tall300msease cp" src="..." />

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 조합	효과
`filterg100p hover-filterg0p tall300msease`	흑백에서 컬러로 전환 (포트폴리오, 팀 소개)
`filterbr80p hover-filterbr110p tall200msease`	어두운 상태에서 밝게 (이미지 갤러리)
`filtersa50p hover-filtersa200p tall300msease`	저채도에서 고채도로 (이미지 강조)
`filteri100p hover-filteri0p tall300msease`	반전에서 원본으로 (인터랙티브 효과)
`o50 hover-o100 filterg100p hover-filterg0p tall300msease`	페이드 + 흑백 해제 조합

drop-shadow vs box-shadow

filterds(drop-shadow)와 box-shadow는 모두 그림자를 추가하지만, 적용 방식이 다릅니다.

	drop-shadow (filterds)	box-shadow
적용 대상	콘텐츠의 실제 형태 (투명 영역 무시)	요소의 박스 (border-box 기준)
투명 PNG/SVG	형태를 따라 그림자 생성	사각 박스 기준 그림자
inset 지원	불가	가능 (내부 그림자)
spread 지원	불가	가능 (그림자 확장)
다중 적용	CSS에서만 가능	쉼표로 다중 적용 가능
주요 용도	아이콘, 비정형 요소 그림자	카드, 버튼, 박스 그림자

팁 & 주의사항

자식 요소 포함

filter는 요소와 모든 자식에 적용됩니다. 부모에 filterg100p를 주면 자식도 흑백이 됩니다. 배경만 블러하려면 bfb5px(backdrop-filter)를 사용하세요.

drop-shadow는 형태를 따름

filterds는 투명 영역을 무시하고 실제 콘텐츠 형태에 맞는 그림자를 생성합니다. PNG 아이콘이나 SVG에 그림자를 줄 때 box-shadow보다 자연스럽습니다.

필터 조합 불가

Atomic CSS에서 한 요소에 여러 filter 클래스를 적용하면 마지막 값만 적용됩니다. 여러 필터를 동시에 사용하려면 중첩 요소에 각각 적용하세요.

성능 고려

filter와 backdrop-filter는 GPU를 사용하지만, 큰 요소나 많은 요소에 적용하면 성능에 영향을 줄 수 있습니다. 특히 모바일에서 backdrop-filter의 블러 값은 적절히 제한하세요.

opacity shadow transition transform background

filter

클래스 목록

패턴 구조

시각적 비교

필터별 상세

filterbfilter: blur()

filterbrfilter: brightness()

filtergfilter: grayscale()

filterdsfilter: drop-shadow()

bf*backdrop-filter

호버 조합

drop-shadow vs box-shadow

팁 & 주의사항

관련 속성

`filterb`filter: blur()

`filterbr`filter: brightness()

`filterg`filter: grayscale()

`filterds`filter: drop-shadow()

`bf*`backdrop-filter