필터

필터 (Filters)

요소에 다양한 필터를 적용하는 JSX 스타일 prop을 알려드려요. 블러, 대비, 그레이스케일 같은 시각적 효과를 쉽게 넣을 수 있어요.

출처: 문서

본문

Filter

filter prop을 사용해서 요소에 블러나 색상 변화 같은 시각적 효과를 적용하세요.

<Box filter="blur(5px)" />
<Box filter="grayscale(80%)" />

Prop	CSS Property	Token Category
`filter`	`filter`	-

Blur

blur prop을 사용해서 요소에 블러 효과를 적용하세요. 이 prop의 요건은 filter prop을 auto로 설정하는 거예요.

// hardcoded value
<Box filter="auto" blur="5px" />

// token value
<Box filter="auto" blur="sm" />

Prop	CSS Property	Token Category
`blur`	`--blur`	`blurs`

Contrast

contrast prop을 사용해서 요소에 대비 효과를 적용하세요. 이 prop의 요건은 filter prop을 사용해서 auto로 설정하는 거예요.

<Box filter="auto" contrast="0.3" />

Prop	CSS Property	Token Category
`contrast`	`--contrast`	-

Drop Shadow

dropShadow prop을 사용해서 요소에 드롭 섀도우 효과를 적용하세요. 이 prop의 요건은 filter prop을 사용해서 auto로 설정하는 거예요.

<Box filter="auto" dropShadow="0px 0px 10px rgba(0, 0, 0, 0.5)" />

Prop	CSS Property	Token Category
`dropShadow`	`--drop-shadow`	-

Grayscale

grayscale prop을 사용해서 요소에 그레이스케일 효과를 적용하세요. 이 prop의 요건은 filter prop을 사용해서 auto로 설정하는 거예요.

<Box filter="auto" grayscale="64%" />

Prop	CSS Property	Token Category
`grayscale`	`--grayscale`	-

Hue Rotate

hueRotate prop을 사용해서 요소에 색상 회전(hue rotate) 효과를 적용하세요. 이 prop의 요건은 filter prop을 사용해서 auto로 설정하는 거예요.

<Box filter="auto" hueRotate="30deg" />

Prop	CSS Property	Token Category
`hueRotate`	`--hue-rotate`	-

Invert

invert prop을 사용해서 요소에 반전(invert) 효과를 적용하세요. 이 prop의 요건은 filter prop을 사용해서 auto로 설정하는 거예요.

<Box filter="auto" invert="40%" />

Prop	CSS Property	Token Category
`invert`	`--invert`	-

Saturate

saturate prop을 사용해서 요소에 채도(saturate) 효과를 적용하세요. 이 prop의 요건은 filter prop을 사용해서 auto로 설정하는 거예요.

<Box filter="auto" saturate="0.4" />

Prop	CSS Property	Token Category
`saturate`	`--saturate`	-

Sepia

sepia prop을 사용해서 요소에 세피아 효과를 적용하세요. 이 prop의 요건은 filter prop을 사용해서 auto로 설정하는 거예요.

<Box filter="auto" sepia="0.4" />

Prop	CSS Property	Token Category
`sepia`	`--sepia`	-

Backdrop Filter

backdropFilter prop을 사용해서 요소 뒤의 영역에 블러나 색상 변화 같은 시각적 효과를 적용하세요. 이렇게 하면 반투명 효과가 만들어져요.

<Box backdropFilter="blur(5px)" />
<Box backdropFilter="grayscale(80%)" />

Prop	CSS Property	Token Category
`backdropFilter`	`backdrop-filter`	-

Backdrop Blur

backdropBlur prop을 사용해서 요소 뒤의 영역에 블러 효과를 적용하세요. 이 prop의 요건은 backdropFilter prop을 auto로 설정하는 거예요.

// hardcoded value
<Box backdropFilter="auto" backdropBlur="5px" />

// token value
<Box backdropFilter="auto" backdropBlur="sm" />

Prop	CSS Property	Token Category
`backdropBlur`	`--backdrop-blur`	`blurs`

Backdrop Contrast

backdropContrast prop을 사용해서 요소 뒤의 영역에 대비 효과를 적용하세요. 이 prop의 요건은 backdropFilter prop을 사용해서 auto로 설정하는 거예요.

<Box backdropFilter="auto" backdropContrast="0.3" />

Prop	CSS Property	Token Category
`backdropContrast`	`--backdrop-contrast`	-

Backdrop Grayscale

backdropGrayscale prop을 사용해서 요소 뒤의 영역에 그레이스케일 효과를 적용하세요. 이 prop의 요건은 backdropFilter prop을 사용해서 auto로 설정하는 거예요.

<Box backdropFilter="auto" backdropGrayscale="64%" />

Prop	CSS Property	Token Category
`backdropGrayscale`	`--backdrop-grayscale`	-

Backdrop Hue Rotate

backdropHueRotate prop을 사용해서 요소 뒤의 영역에 색상 회전 효과를 적용하세요. 이 prop의 요건은 backdropFilter prop을 사용해서 auto로 설정하는 거예요.

<Box backdropFilter="auto" backdropHueRotate="30deg" />

Prop	CSS Property	Token Category
`backdropHueRotate`	`--backdrop-hue-rotate`	-

Backdrop Invert

backdropInvert prop을 사용해서 요소 뒤의 영역에 반전 효과를 적용하세요. 이 prop의 요건은 backdropFilter prop을 사용해서 auto로 설정하는 거예요.

<Box backdropFilter="auto" backdropInvert="40%" />

Prop	CSS Property	Token Category
`backdropInvert`	`--backdrop-invert`	-

Backdrop Opacity

backdropOpacity prop을 사용해서 요소 뒤의 영역에 투명도 효과를 적용하세요. 이 prop의 요건은 backdropFilter prop을 사용해서 auto로 설정하는 거예요.

<Box backdropFilter="auto" backdropOpacity="0.4" />

Prop	CSS Property	Token Category
`backdropOpacity`	`--backdrop-opacity`	-

Backdrop Saturate

backdropSaturate prop을 사용해서 요소 뒤의 영역에 채도 효과를 적용하세요. 이 prop의 요건은 backdropFilter prop을 사용해서 auto로 설정하는 거예요.

<Box backdropFilter="auto" backdropSaturate="0.4" />

Prop	CSS Property	Token Category
`backdropSaturate`	`--backdrop-saturate`	-

Backdrop Sepia

backdropSepia prop을 사용해서 요소 뒤의 영역에 세피아 효과를 적용하세요. 이 prop의 요건은 backdropFilter prop을 사용해서 auto로 설정하는 거예요.

<Box backdropFilter="auto" backdropSepia="0.4" />

Prop	CSS Property	Token Category
`backdropSepia`	`--backdrop-sepia`	-

필터