Creates dynamic gradients that respond to mouse/touch movement. Uses CSS custom properties with smooth interpolation for fluid animations. Features 6 artistic presets with layered radial and linear gradients using blend modes. Supports multi-color palettes and customizable sensitivity. Perfect for hero sections, backgrounds, or adding life to any container.

Interactive Gradient

Move your mouse over the gradient to interact.

Aurora

Interactive Gradient Effect

Colors

Colors pipe-separated hex colors

Color palette for gradient. Separate colors with | symbol. Minimum 2 colors required, up to 6 colors supported depending on preset.

Required (e.g., "#667eea|#764ba2|#f093fb")

Preset

Preset 6 modes

Artistic gradient style with unique blend modes and patterns. Options: aurora (6 colors, northern lights), bloom (4 colors, soft petals), cosmic (3 colors, space nebula), wave (5 colors, fluid motion), twilight (2 colors, simple fade), ember (4 colors, fire glow).

Default: aurora

Interaction

Intensity 0.1-3.0

Strength of gradient shift. Higher creates more dramatic movement from cursor position.

Default: 1

Smoothness 0.05-0.5

Animation interpolation speed. Lower is smoother but slower to respond, higher is snappier.

Default: 0.15

Sensitivity 0.5-2.0

Mouse movement sensitivity multiplier. Higher amplifies small movements for more reactive feel.

Default: 1

Performance

This element uses CSS custom properties (--posX, --posY) with calc() for gradient positioning. Features smooth interpolation via requestAnimationFrame with lerp algorithm for natural easing. Uses passive event listeners for pointer and touch. Respects prefers-reduced-motion for accessibility. Employs background-blend-mode for artistic effects. Very lightweight - suitable for all devices and multiple instances per page with 60fps performance.