> For the complete documentation index, see [llms.txt](https://codennerd.gitbook.io/cxcss/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codennerd.gitbook.io/cxcss/product-guides/effects/blend-mode.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.