backdrop-opacity-10

The backdrop-opacity-10 class belongs to the backdrop opacity group within the filters category.

Example Usage

Here is an example of how to use backdrop-opacity-10:

<div class="relative">
  <div class="backdrop-opacity-10 h-48 w-24 bg-white/30 absolute left-0"></div>
  <img src="/placeholders/mountain.jpg" class="rounded-lg h-48 w-48">
</div>

Resulting CSS

--tw-backdrop-opacity: opacity(0.1);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);

Other Backdrop opacity Classes

Get Tailwind Scanner!

The absolute must-have tool for anyone using Tailwind CSS.

Scan, Edit, Export any tailwind site in browser to create the perfect UI - download the chrome extension!