Effects

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

The shadow-sm class adds a box shadow-sm to an element, with the default shadow-sm being a subtle shadow-sm that gives the element a slight raised appearance. The shadow-* class adds a box shadow-sm 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-sm, 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.