AnimatedGradient

Smooth animated gradient background for modern, premium aesthetics. Supports linear and radial gradients with configurable colors, animation speed, and intensity. GPU‑accelerated for smooth 60fps performance.

Use Cases

• Hero section backgrounds with dynamic gradient movement
• Premium landing pages with modern aesthetic
• Creative portfolio backgrounds
• Feature section backgrounds for visual interest
• Wedding/event page backgrounds (soft pastels)
• SaaS landing pages (subtle, professional gradients ONLY)

Properties

gradientType

Gradient type. Type: string. Options: linear, radial. Default: linear. Tip: modern – linear (most versatile); spotlight – radial (centered glow effect).

colors

Comma-separated list of 2-4 hex color codes for gradient. Type: string. Default: #667eea, #764ba2.

animationSpeed

Animation cycle duration. Type: string. Options: slow, medium, fast. Default: medium. Tip: Visual impact – slow: 20 seconds (elegant, subtle, best for professional/wedding); medium: 10 seconds (balanced movement); fast: 5 seconds (energetic, dynamic, use sparingly).

direction

Gradient direction (for linear gradients). Type: string. Options: horizontal, vertical, diagonal, radial. Default: diagonal. Tip: modern – diagonal (most popular); clean – horizontal or vertical; spotlight – radial (for radial gradients).

intensity

Animation movement amplitude. Type: string. Options: subtle, moderate, vibrant. Default: moderate. Tip: Visual impact – subtle: 150% background-size (gentle movement, best for business/SaaS); moderate: 200% background-size (balanced movement, good for most); vibrant: 300% background-size (bold movement, creative/artistic only).

blur

Blur amount in pixels (0-20). 0 = no blur, 5-10 = soft depth effect. WARNING: Blur degrades mobile performance – use sparingly. Type: number. Default: 0.

opacity

Overall opacity (0-1). 1 = fully opaque, 0.3-0.5 = subtle overlay over content. Type: number. Default: 1.

zIndex

Layer positioning. -1 = behind everything, 0 = behind content (recommended), positive = in front of content (AVOID). Type: number. Default: 0.

Best Practices

• Use 2-3 colors for clean gradients (avoid too many colors – becomes muddy)
• Choose colors with similar lightness for smooth transitions (avoid extreme dark/light contrast)
• Use slow‑medium speed for subtle, professional movement (fast can be distracting)
• Set zIndex=-1 or 0 to place behind content (never cover text)
• Pair with Hero component for immersive landing pages
• For business/SaaS: Use intensity='subtle', slow speed, professional colors
• For weddings: Use soft pastels (#fce7f3, #fbcfe8, #f5d0fe), slow speed, subtle intensity
• For creative: Use vibrant colors, moderate intensity, medium speed
• Respects prefers-reduced-motion for accessibility (animation freezes automatically)
• Optional blur (5-10px) creates depth perception effect

Common Mistakes

Using vibrant intensity for SaaS/business apps

Why it's a problem: Vibrant movement is distracting in professional contexts

Fix: For SaaS/business, use intensity='subtle', slow speed, professional colors (#3b82f6, #8b5cf6)

Using too many colors (5+)

Why it's a problem: Gradients with many colors become muddy and unattractive

Fix: Use 2-3 colors maximum for clean, smooth gradients

Mixing extreme dark and light colors

Why it's a problem: High contrast gradients create harsh transitions

Fix: Choose colors with similar lightness (#667eea, #764ba2 both mid-tone)

Setting zIndex > 0 (covering content)

Why it's a problem: Gradient blocks text readability

Fix: ALWAYS use zIndex=-1 or 0 to place behind content

Using blur on mobile

Why it's a problem: Blur filter significantly degrades mobile performance

Fix: Avoid blur, or set opacity=0.3-0.5 instead for subtle effect