mix-blend-hard-light

The mix-blend-hard-light class belongs to the mix blend mode group within the effects category.

Example Usage

Here is an example of how to use mix-blend-hard-light:

<div class="flex -space-x-8">
  <div class="mix-blend-hard-light h-24 w-24 bg-blue-400"></div>
  <div class="mt-8 h-24 w-24 bg-pink-400"></div>
</div>

Resulting CSS

mix-blend-mode: hard-light;

Other Mix blend mode Classes

mix-blend-normal mix-blend-multiply mix-blend-screen mix-blend-overlay mix-blend-darken mix-blend-lighten mix-blend-color-dodge mix-blend-color-burn mix-blend-soft-light mix-blend-difference mix-blend-exclusion mix-blend-hue mix-blend-saturation mix-blend-color mix-blend-luminosity mix-blend-plus-darker

View other Effects classes View all Mix blend mode 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!