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: 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: 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