Shadow animation

Set a "shadow" CSS effect to an element right in the HTML code

Overview

The shadow alias is a shorthand for the box-shadow with various variants. You can use it for a static styling or in combination with various triggers to create effects such as elevations or floating elements.

Hover

Syntax

Default

The default shadow parameters:

Name Default Variants
shadow rgba(0, 0, 0, 1) {sm|md|lg|xl}

Custom options

You can customize the shadow alias options.

Examples

These examples show the shadow alias in action using the hover trigger, but you can use any of the supported triggers.

Static styling

You can apply the shadow alias as a static CSS style. It’s like an alternative to Tailwind or Bootstrap shadow class utilities.

Static styling

Triggers

Use a shadow in combination with various trigger to animate the box-shadow. In this case, the hover trigger will animate the lg variant of a shadow alias.

Hover

Custom values

This effect does not support any custom values.

Options

All property options passed in the <> are supported.

Hover