Glow Effect
Advanced glow effect component with multiple animation types, customizable colors, gradients, and multi-layer effects for creating stunning visual enhancements
Pro Features
Unlock advanced capabilities with the Pro version
Multiple Animations
6 built-in animation types: pulse, breathe, flicker, wave, rainbow, and none
Multi-layer Glow
Create depth with multiple glow layers and adjustable offsets
Gradient Support
Beautiful gradient glows with customizable colors and directions
Neon Effect
Realistic neon sign effect with flicker animation
Mouse Tracking
Interactive glow that follows cursor movement
Custom Shapes
Box, circle, star, and hexagon glow shapes
Hover Effects
Intensity boost and special effects on hover
Text Glow
Apply glow effects directly to typography
Installation
Install via CLI
npx @moontra/moonui-cli add glow-effectUsage
Glow Effect
Transform your UI with dynamic glow effects. Support for multiple animations, colors, and advanced features.
Examples
Animation Types
GlowEffect supports multiple animation types: pulse, breathe, flicker, wave, rainbow, and none for different visual effects
Pulse
Opacity fade
Breathe
Scale & opacity
Flicker
Neon effect
Rainbow
Hue rotation
Multi-layer Glow
Create depth and complexity with multi-layer glow effects. Each layer adds intensity and visual richness
Single Layer
Basic glow effect
3 Layers
Enhanced depth
5 Layers
Maximum depth
Gradient Glow
Apply beautiful gradient glows with customizable colors and directions for vibrant multi-color effects
Purple Dream
45° gradient
Sunset Glow
135° gradient
Ocean Wave
90° gradient
Neon Effect
Create realistic neon sign effects with flicker animation and intense glow for retro-futuristic designs
NEONGLOW
Retro futuristic design
Interactive Mouse Tracking
Enable dynamic mouse tracking for interactive glow effects that follow cursor movement within the element
Mouse Tracking
Move your cursor over this card to see the dynamic glow effect that follows your mouse movement
Hover & Interactive Effects
Combine hover effects with glow intensity multipliers and backdrop blur for interactive elements
Hover Intensity Boost
2.5x intensity on hover
Backdrop Blur Effect
15px backdrop blur
Custom Shapes
Clip the glow layer into box, circle, star, or hexagon shapes using the shape prop
Box
shape="box"
Circle
shape="circle"
Star
shape="star"
Hexagon
shape="hexagon"
Text Glow & Inner Glow
Apply the glow directly to typography with textGlow, or add a glow inset within the element with innerGlow
Glowing Text
textGlow applies the glow directly to typography
Inner Glow
innerGlow adds a glow inset within the element
Wave Animation
The wave animation type sweeps a directional highlight across the glow layer
Wave Animation
A directional highlight sweeps across the glow
Custom Filter & Mobile Optimization
Override the glow layer's CSS filter with customFilter, or automatically disable the effect on small screens with disableOnMobile
Custom Filter
customFilter overrides the default CSS filter on the glow layer
Mobile Optimized
disableOnMobile turns off the effect at ≤768px for performance