# Blend Mode

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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://codennerd.gitbook.io/cxcss/product-guides/effects/blend-mode.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.