Components

Background Gradient Animation

Animated background with customizable gradient colors and interactive effects.

Background Gradient Animation

The BackgroundGradientAnimation component creates an animated background with customizable gradient colors and interactive effects. It features multiple animated radial gradients that blend together to create a dynamic, visually appealing background.

Usage

Gradient Animation

Beautiful animated gradient background with interactive effects

<template>
  <div class="h-96 w-full rounded-lg overflow-hidden relative">
    <MBackgroundGradientAnimation>
      <div class="relative z-10 h-full flex flex-col items-center justify-center text-white">
        <h2 class="text-3xl font-bold mb-4">Gradient Animation</h2>
        <p class="text-lg mb-6 text-center max-w-md">
          Beautiful animated gradient background with interactive effects
        </p>
        <button class="px-6 py-3 bg-white/10 backdrop-blur-sm rounded-full hover:bg-white/20 transition-colors">
          Explore
        </button>
      </div>
    </MBackgroundGradientAnimation>
  </div>
</template>

Props

gradientBackgroundStart

string

Starting color for the background gradient.

gradientBackgroundEnd

string

Ending color for the background gradient.

firstColor

string

First radial gradient color (RGB values).

secondColor

string

Second radial gradient color (RGB values).

thirdColor

string

Third radial gradient color (RGB values).

fourthColor

string

Fourth radial gradient color (RGB values).

fifthColor

string

Fifth radial gradient color (RGB values).

pointerColor

string

Pointer color for interactive effects (RGB values).

size

string

Size of the radial gradients.

blendingValue

string

Blending mode for the gradients.

class

string

CSS classes to apply to the content container.

interactive

boolean

Enable interactive mouse effects.

containerClass

string

CSS classes to apply to the container.

Examples

Basic Gradient Animation

Gradient Magic

Bring your interfaces to life with smoothly animated gradient backgrounds that captivate and engage users

<template>
  <div class="h-64 w-full rounded-lg overflow-hidden relative">
    <MBackgroundGradientAnimation>
      <div class="relative z-10 h-full flex items-center justify-center text-white">
        <h3 class="text-xl font-bold">Basic Gradient Animation</h3>
      </div>
    </MBackgroundGradientAnimation>
  </div>
</template>

Custom Colors

Gradient animation with custom color scheme

<template>
  <div class="h-64 w-full rounded-lg overflow-hidden relative">
    <MBackgroundGradientAnimation
      gradient-background-start="rgb(255, 110, 110)"
      gradient-background-end="rgb(0, 17, 82)"
      first-color="255, 100, 100"
      second-color="100, 255, 200"
      third-color="200, 100, 255"
      :interactive="true"
    >
      <div class="relative z-10 h-full flex flex-col items-center justify-center text-white space-y-4">
        <h3 class="text-2xl font-bold">Custom Colors</h3>
        <p class="text-center max-w-md">
          Gradient animation with custom color scheme
        </p>
      </div>
    </MBackgroundGradientAnimation>
  </div>
</template>

Background Beams

Animated SVG background with customizable beam paths and gradient colors.

Background Lines

Animated SVG background with customizable colored lines that move across the screen.