Brightness - Tailwind docs example

Basic usage

Changing element brightness

Use the brightness-{amount?} utilities to control an element's brightness.

<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"
      >
        brightness-50
      </p>
      <div class="relative brightness-50">
        <img
          class="h-24 w-24 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"
      >
        brightness-100
      </p>
      <div class="relative brightness-100">
        <img
          class="h-24 w-24 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"
      >
        brightness-125
      </p>
      <div class="relative brightness-125">
        <img
          class="h-24 w-24 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"
      >
        brightness-200
      </p>
      <div class="relative brightness-200">
        <img
          class="h-24 w-24 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>

Removing filters

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 brightness utilities. You can customize these values by editing theme.brightness or theme.extend.brightness in your tailwind.config.js file.

tailwind.config.js

  module.exports = {
    theme: {
      extend: {
+       brightness: {
+         25: '.25',
+         175: '1.75',
+       }
      }
    }
  }

Learn more about customizing the default theme in the theme customization documentation.