Backdrop Blur - Taiwlind docs example

Basic usage

Blurring behind an element

Use the backdrop-blur-{amount?} utilities to control an element’s backdrop blur.

<div
  class="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible"
>
  <div
    class="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4"
  >
    <div class="flex shrink-0 flex-col items-center">
      <p
        class="mb-3 text-center font-mono text-sm font-medium text-slate-500 dark:text-slate-400"
      >
        backdrop-blur-sm
      </p>
      <div class="relative">
        <div
          class="absolute inset-6 h-20 w-20 bg-white/30 backdrop-blur-sm"
        ></div>
        <img
          class="h-32 w-32 rounded-lg object-cover shadow-xl"
          src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=320&h=320&q=80"
        />
        <div
          class="absolute inset-0 rounded-lg ring-1 ring-inset ring-black/10"
        ></div>
      </div>
    </div>
    <div class="flex shrink-0 flex-col items-center">
      <p
        class="mb-3 text-center font-mono text-sm font-medium text-slate-500 dark:text-slate-400"
      >
        backdrop-blur-md
      </p>
      <div class="relative">
        <div
          class="absolute inset-6 h-20 w-20 bg-white/30 backdrop-blur-md"
        ></div>
        <img
          class="h-32 w-32 rounded-lg object-cover shadow-xl"
          src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=320&h=320&q=80"
        />
        <div
          class="absolute inset-0 rounded-lg ring-1 ring-inset ring-black/10"
        ></div>
      </div>
    </div>
    <div class="flex shrink-0 flex-col items-center">
      <p
        class="mb-3 text-center font-mono text-sm font-medium text-slate-500 dark:text-slate-400"
      >
        backdrop-blur-xl
      </p>
      <div class="relative">
        <div
          class="absolute inset-6 h-20 w-20 bg-white/30 backdrop-blur-xl"
        ></div>
        <img
          class="h-32 w-32 rounded-lg object-cover shadow-xl"
          src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=320&h=320&q=80"
        />
        <div
          class="absolute inset-0 rounded-lg ring-1 ring-inset ring-black/10"
        ></div>
      </div>
    </div>
  </div>
</div>

Applying conditionally

Hover, focus, and other states

Breakpoints and media queries

Using custom values

Customizing your theme

By default, Tailwind includes a handful of general purpose backdrop-blur utilities. You can customize these values by editing theme.backdropBlur or theme.extend.backdropBlur in your tailwind.config.js file.

tailwind.config.js

  module.exports = {
    theme: {
      extend: {
+       backdropBlur: {
+         xs: '2px',
+       }
      }
    }
  }