Radiate animation

Create a radiate CSS animation effect right in the HTML code

The radiate built-in loop creates a radiate effect by spreading and fading a box-shadow of an element in an infinite animation loop.

Default

The default animate:radiate() without any values or options uses these default parameters:

Name	Color	Options
`radiate`	`rgba(0, 0, 0, 1)`	`spread: 1rem, duration: 1s`

Custom values

You can also customize the animation by changing the value and options.

In order to use a radiate animation with the default settings, just use animate:radiate().

Radiate

Change the default box-shadow color by defining a custom color value. In this case we’re using a #aa00ff.

Radiate

Here is the list of available options for the radiate animation loop.

Change the duration of the animation speed.

Radiate

Change the spread amount of the animated box-shadow effect by using a spread option.

Radiate