📪Blend Mode

Blend Mode Classes

The following utility classes control the blend mode of elements:

.mix-normal Sets the blend mode of the element to normal.

CSS equivalent: mix-blend-mode: normal;

Example usage:

<div class="mix-normal">
  <!-- Content with normal blend mode -->
</div>

.mix-multiply Sets the blend mode of the element to multiply.

CSS equivalent: mix-blend-mode: multiply;

Example usage:

<div class="mix-multiply">
  <!-- Content with multiply blend mode -->
</div>

.mix-screen Sets the blend mode of the element to screen.

CSS equivalent: mix-blend-mode: screen;

Example usage:

<div class="mix-screen">
  <!-- Content with screen blend mode -->
</div>

.mix-overlay Sets the blend mode of the element to overlay.

CSS equivalent: mix-blend-mode: overlay;

Example usage:

<div class="mix-overlay">
  <!-- Content with overlay blend mode -->
</div>

.mix-darken Sets the blend mode of the element to darken.

CSS equivalent: mix-blend-mode: darken;

Example usage:

<div class="mix-darken">
  <!-- Content with darken blend mode -->
</div>

.mix-lighten Sets the blend mode of the element to lighten.

CSS equivalent: mix-blend-mode: lighten;

Example usage:

<div class="mix-lighten">
  <!-- Content with lighten blend mode -->
</div>

.mix-color-dodge Sets the blend mode of the element to color-dodge.

CSS equivalent: mix-blend-mode: color-dodge;

Example usage:

<div class="mix-color-dodge">
  <!-- Content with color-dodge blend mode -->
</div>

.mix-color-burn Sets the blend mode of the element to color-burn.

CSS equivalent: mix-blend-mode: color-burn;

Example usage:

<div class="mix-color-burn">
  <!-- Content with color-burn blend mode -->
</div>

.mix-hard-light Sets the blend mode of the element to hard-light.

CSS equivalent: mix-blend-mode: hard-light;

Example usage:

<div class="mix-hard-light">
  <!-- Content with hard-light blend mode -->
</div>

.mix-soft-light Sets the blend mode of the element to soft-light.

CSS equivalent: mix-blend-mode: soft-light;

Example usage:

<div class="mix-soft-light">
  <!-- Content with soft-light blend mode -->
</div>

.mix-difference Sets the blend mode of the element to difference.

CSS equivalent: mix-blend-mode: difference;

Example usage:

<div class="mix-difference">
  <!-- Content with difference blend mode -->
</div>

.mix-exclusion Sets the blend mode of the element to exclusion.

CSS equivalent: mix-blend-mode: exclusion;

Example usage:

<div class="mix-exclusion">
  <!-- Content with exclusion blend mode -->
</div>

.mix-hue Sets the blend mode of the element to hue.

CSS equivalent: mix-blend-mode: hue;

Example usage:

<div class="mix-hue">
  <!-- Content with hue blend mode -->
</div>

.mix-saturation Sets the blend mode of the element to saturation.

CSS equivalent: mix-blend-mode: saturation;

Example usage:

<div class="mix-saturation">
  <!-- Content with saturation blend mode -->
</div>

.mix-color Sets the blend mode of the element to color.

CSS equivalent: mix-blend-mode: color;

Example usage:

<div class="mix-color">
  <!-- Content with color blend mode -->
</div>

.mix-luminosity Sets the blend mode of the element to luminosity.

CSS equivalent: mix-blend-mode: luminosity;

Example usage:

<div class="mix-luminosity">
  <!-- Content with luminosity blend mode -->
</div>

Feel free to apply these classes to elements to achieve different blend modes as needed.