Mixing Utilities

https://go.raybo.org/5Wv-

There are different ways to control how elements mix and filter with other elements. Let's take a look at some of those classes.

Backdrop Filter

backdrop-filter
backdrop-filter-none

  • backdrop(-TYP)

    • AMT

      blur brightness contrast grayscale hue-rotate

      invert opacity saturate sepia

  • backdrop-opacity(-AMT)

    • AMT

      0 5 10 20 25 30 40 50

      60 70 75 80 90 95 100

Docs Try it

Backdrop filter helps you control how an element filters what's behind it. Most of the filter options are available here, but not all, so dropshadow is missing, for example.

Also, there is an additional property for controlling the strength of this effect called backdrop-opacity, which receives the same values as the opacity property.

Isolation

isolate isolation-auto

Docs Try it

Isolation is a CSS property that works with mix blend modes. Normally the mix-blend-mode will make the element it's assigned to interact with every element underneath. By turning on the isolation, you can limit the blend mode to interact only with certain elements. You'll want to see this one, so look at the example.

Background Blend Mode

  • bg-blend(-typ)
    • TYP

      normal multiply screen overlay darken lighten
      color-dodge color-burn hard-light soft-light difference exclusion hue saturation

Docs Try it

If an element has a background image as well as a background color, you can use the background blend mode to control how the image blends with its background color.

Mix Blend Mode

  • mix-blend(-typ)
    • TYP

      normal multiply screen overlay darken lighten color-dodge
      color-burn hard-light soft-light difference exclusion hue saturation

Docs Try it

The mix blend mode allows you to control how an element looks when it sits on top of another element. It will combine both elements, sort of similar to the bg-blend.