Glow Effect

A customizable glow effect with animation modes, colors, blur, and transitions.

A customizable glow effect with animation modes, colors, blur, and transitions.

Examples

You can use different modes to animate the glow effect.

npx shadcn@latest add "https://components.dylanwlim.com/c/glow-effect.json"

Prop	Type	Default	Description
className	string	undefined	Optional CSS class for styling the component.
style	React.CSSProperties	undefined	Optional CSS properties for styling the component.
colors	string[]	['#FF5733', '#33FF57', '#3357FF', '#F1C40F']	The colors to use for the glow effect.
mode	'rotate' \| 'pulse' \| 'breathe' \| 'colorShift' \| 'flowHorizontal' \| 'static'	'rotate'	The mode to use for the glow effect.
blur	'number' \| 'softest' \| 'soft' \| 'medium' \| 'strong' \| 'strong' \| 'stronger' \| 'strongest' \| 'none'	'medium'	The blur to use for the glow effect.
transition	Transition	undefined	The transition to use for the glow effect.
scale	number	1	The scale to use for the glow effect.
duration	number	5	The duration to use for the glow effect.

On This Page

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.