Effects

The effects utility classes in Tailwind CSS provide a set of tools for adding various visual effects to elements.

The shadow class adds a box shadow to an element, with the default shadow being a subtle shadow that gives the element a slight raised appearance. The shadow-* class adds a box shadow with a defined size to an element, with the * in the class name indicating the size of the shadow. The possible size values are sm, md, lg, xl, 2xl, inner, and none. To change the color of the box shadow, you can use the shadow-<color> class. Check out Box Shadow Colors for all available colors.

The opacity-* class sets the transparency of an element, with the * in the class name indicating the transparency level from 0 (fully transparent) to 100 (fully opaque).

The mix-blend-* class sets the background color of an element and changes the element's blend mode, with the * in the class name indicating the blend mode. The possible blend mode values are multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. The bg-blend-* class sets the background image of an element and changes the element's blend mode, with the * in the class name indicating the blend mode. The possible blend mode values are the same as for the mix-blend-* class.