filter-blur

filter-blur (블러 필터)

요소에 흐림(blur) 필터를 적용하는 유틸리티예요. 옆에서 함께 짚어 드릴게요.

출처: 문서

본문

ClassStyles

클래스	스타일
`blur-xs`	`filter: blur(var(--blur-xs)); /* 4px */`
`blur-sm`	`filter: blur(var(--blur-sm)); /* 8px */`
`blur-md`	`filter: blur(var(--blur-md)); /* 12px */`
`blur-lg`	`filter: blur(var(--blur-lg)); /* 16px */`
`blur-xl`	`filter: blur(var(--blur-xl)); /* 24px */`
`blur-2xl`	`filter: blur(var(--blur-2xl)); /* 40px */`
`blur-3xl`	`filter: blur(var(--blur-3xl)); /* 64px */`
`blur-none`	`filter: ;`
`blur-(<custom-property>)`	`filter: blur(var(<custom-property>));`
`blur-[<value>]`	`filter: blur(<value>);`

Examples

Basic example

blur-sm 이나 blur-lg 같은 유틸리티를 사용해서 요소를 흐릿하게 만들 수 있어요.

<img class="blur-none" src="/img/mountains.jpg" />
<img class="blur-sm" src="/img/mountains.jpg" />
<img class="blur-lg" src="/img/mountains.jpg" />
<img class="blur-2xl" src="/img/mountains.jpg" />

Using a custom value

blur-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 블러를 설정할 수 있어요.

<img class="blur-[2px] ..." src="/img/mountains.jpg" />

CSS 변수라면 blur-(<custom-property>) 문법을 사용할 수도 있어요.

<img class="blur-(--my-blur) ..." src="/img/mountains.jpg" />

이는 blur-[var(<custom-property>)] 의 축약형으로, var() 함수를 자동으로 추가해 주는 문법이에요.

Responsive design

filter: blur() 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

<img class="blur-none md:blur-lg ..." src="/img/mountains.jpg" />

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.

Customizing your theme

--blur-* 테마 변수를 사용해서 프로젝트의 블러 유틸리티를 커스터마이즈할 수 있어요.

@theme {
  --blur-2xs: 2px;
}

이제 마크업에서 blur-2xs 유틸리티를 사용할 수 있어요.

<img class="blur-2xs" src="/img/mountains.jpg" />

테마를 커스터마이즈하는 방법에 대해 더 자세히 알고 싶다면 theme 문서를 참고해 주세요.