Box shadow CSS property

Learn how to animate a custom CSS box-shadow or use a built-in variants

Overview

Create engaging CSS box-shadow animations using the standard CSS box-shadow property. With TorusKit, you can also access predefined shadow aliases like sm, md, lg, and xl to quickly add shadow effects of varying intensity. These shortcuts make it simple to apply CSS shadow effects without manually defining each parameter.

Syntax

To animate box-shadow properties effectively, follow the box-shadow syntax. Ensure that all parameters—x, y offsets, blur, spread, and color—are included to achieve the desired effect with TorusKit’s box-shadow animations.

Default usage

For a basic CSS box-shadow animation, define shadow properties within your TorusKit setup. You can use either the full box-shadow syntax or the shorthand bs format to specify all shadow parameters.

Alias

For added convenience, TorusKit includes built-in shadow aliases, making it easier to achieve CSS shadow effects with specific blur levels. These variants (sm, md, lg, xl) save time by allowing quick access to preset shadow options.

Definition

Use the following syntax to apply a predefined CSS shadow variant quickly.

Variants

See each box-shadow variant in action here:

sm
md
lg
xl

Examples

The examples below demonstrate how to use various box-shadow properties with TorusKit. While these examples use the hover or animate trigger, you can apply any other trigger that is available.

Initial value

To start an element’s box-shadow animation from a particular style, define an initial CSS shadow effect. Since TorusKit processes elements before rendering, there’s no Flash of unstyled content, so styles load instantly.

Initial

Discrete timeline

Using a discrete timeline for CSS box-shadow animation requires only an initial value (optional) and a final value. In this example, the box-shadow property is animated to 0rem 1rem 2rem 0rem #ff00a9. If no initial value is set, TorusKit defaults to the element’s current CSS style.

Animate

Sequenced timeline

A sequenced timeline allows CSS shadow effects to change in a specific order—sequence of steps. In this example, we animate box-shadow properties across multiple steps with different colors (hex, rgba, and hsla) for a gradual box-shadow animation.

Animate

Offset timeline

An offset timeline defines animation steps by percentage offsets, providing another method for animating box-shadow. This example animates box-shadow properties across offsets for a smooth sequence.

In this case, we have omitted the first step with an offset of 0%, which is typically used to set the initial values for all properties. As a result, TorusKit retrieves the initial values from the current element’s style.

Animate