📪Blend Mode
The following utility classes control the blend mode of elements:
.mix-normal
.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
.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
.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
.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
.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
.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
.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
.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
.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
.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
.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
.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
.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
.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
.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
.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.
Last updated