Effects

Utilities for Effects.

Box Shadow

Using shadow-[*], you can control the box-shadow of an element.

shadow-

Customizing

Modify Mojo's configuration object to personalize box-shadow utilities and introduce fresh options as per your requirements.



mojo({
    base: {
        definedValues: {
           -- boxShadow ** : {
                xs: "0 1px 2px var(--m-shadow-color, #0000001a)",
                sm: "0 1px 3px var(--m-shadow-color, #0000001a), 0 1px 2px var(--m-shadow-color, #0000001a)",
                md: "0 4px 6px var(--m-shadow-color, #0000001a), 0 2px 4px var(--m-shadow-color, #0000001a)",
                lg: "0 10px 15px var(--m-shadow-color, #0000001a), 0 4px 6px var(--m-shadow-color, #0000001a)",
                xl: "0 20px 25px var(--m-shadow-color, #0000001a), 0 10px 10px var(--m-shadow-color, #0000001a)",
            }
        },
    },
})
When creating a new box-shadow utility,
we think it's best to use `var(--m-shadow-color, #0000001a)` (#0000001a being the default color) for the shadow color. This way, if you ever want to change the color down the line, you can easily do so using built-in color utilities like `shadow-c-red`.

Mix Blend Mode

Using mix-blend-[*], you can control the blending of an element's content and its background.

mix-blend-

Background Blend Mode

Using bg-blend-[*], you can control the blending of an element's background color and background image.

bg-blend-