backdrop-blur

backdrop-blur (백드롭 블러)

요소 뒤쪽(백드롭)을 흐릿하게(blur) 만들어 주는 유틸리티예요. 반투명 배경 뒤에 블러 효과를 더하고 싶을 때 유용해요.

출처: 문서

본문

ClassStyles

클래스	스타일
`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>);`

Examples

Basic example

backdrop-blur-sm이나 backdrop-blur-lg 같은 유틸리티를 사용하면 요소의 백드롭 블러를 조절할 수 있어요.

<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-blur-none ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-blur-sm ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-blur-md ..."></div>
</div>

Using a custom value

완전히 커스텀한 값으로 백드롭 블러를 지정하고 싶다면 backdrop-blur-[<value>] 문법을 사용해요.

<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() 함수를 자동으로 넣어 주는 문법이에요.

Responsive design

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

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

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

Customizing your theme

--blur-* 테마 변수를 사용하면 프로젝트에서 백드롭 블러 유틸리티를 커스터마이즈할 수 있어요.

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

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

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

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