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