bg-blend-screen

The bg-blend-screen class belongs to the background blend mode group within the effects category.

Example Usage

Here is an example of how to use bg-blend-screen:

<div class="sm:flex">
  <div class="bg-blend-screen h-96 w-96 bg-contain bg-no-repeat bg-indigo-700 bg-[url('/placeholders/nature.webp')]"></div>
  <div class="h-96 w-96 bg-contain bg-no-repeat bg-[url('/placeholders/nature.webp')]"></div>
</div>

Resulting CSS

background-blend-mode: screen;

Other Background blend mode Classes

bg-blend-normalbg-blend-multiplybg-blend-overlaybg-blend-darkenbg-blend-lightenbg-blend-color-dodgebg-blend-color-burnbg-blend-hard-lightbg-blend-soft-lightbg-blend-differencebg-blend-exclusionbg-blend-huebg-blend-saturationbg-blend-colorbg-blend-luminosity
View other Effects 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!