backdrop-filter: blur()

엘리먼트에 배경 블러 필터를 적용하는 유틸리티입니다.

Class Styles

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

backdrop-blur-xs

backdrop-filter: blur(var(--blur-xs)); /* 4px */

backdrop-blur-sm

backdrop-filter: blur(var(--blur-sm)); /* 8px */

backdrop-blur-md

backdrop-filter: blur(var(--blur-md)); /* 12px */

backdrop-blur-lg

backdrop-filter: blur(var(--blur-lg)); /* 16px */

backdrop-blur-xl

backdrop-filter: blur(var(--blur-xl)); /* 24px */

backdrop-blur-2xl

backdrop-filter: blur(var(--blur-2xl)); /* 40px */

backdrop-blur-3xl

backdrop-filter: blur(var(--blur-3xl)); /* 64px */

backdrop-blur-none

backdrop-filter: ;

backdrop-blur-(<custom-property>)

backdrop-filter: blur(var(<custom-property>));

backdrop-blur-[<value>]

backdrop-filter: blur(<value>);

예제

backdrop-blur-sm과 backdrop-blur-lg 같은 유틸리티를 사용해 엘리먼트의 배경 블러를 조절할 수 있습니다.

backdrop-blur-[<value>] 구문을 사용하세요 backdrop blur를 완전히 커스텀한 값으로 설정하려면:

<div class="backdrop-blur-[2px] ...">  <!-- ... --></div>

CSS 변수를 사용하려면 backdrop-blur-(<custom-property>) 구문을 사용할 수도 있습니다:

<div class="backdrop-blur-(--my-backdrop-blur) ...">  <!-- ... --></div>

이는 backdrop-blur-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.

접두사 a backdrop-filter: blur() 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

<div class="backdrop-blur-none md:backdrop-blur-lg ...">  <!-- ... --></div>

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.

--blur-* 테마 변수를 사용해 프로젝트에서 backdrop blur 유틸리티를 커스터마이징할 수 있습니다:

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

이제 backdrop-blur-2xs 유틸리티를 마크업에서 사용할 수 있습니다:

<div class="backdrop-blur-2xs">  <!-- ... --></div>

테마 커스터마이징에 대해 더 알아보려면 테마 문서를 참고하세요.