Gradient Mesh
Animated gradient mesh background with water effects and color blending powered by OGL WebGL library.
Customize
Adjust parameters and experiment with different color presets in real time.
5
0.50
1
1
0
0
90°
0.10
10
0.20
0.06
Installation
npx love-ui@latest add gradient-meshUsage
import { GradientMesh } from "@/components/gradient-mesh"<GradientMesh
colors={["#3b2a8d", "#aaa7d7", "#f75092"]}
distortion={5}
swirl={0.5}
speed={1.0}
/>Props
colors
An array of hex color strings for the gradient mesh (uses first 3 colors).
- Type:
string[] - Default:
["#3b2a8d", "#aaa7d7", "#f75092"]
<GradientMesh colors={["#FF0000", "#00FF00", "#0000FF"]} />distortion
The amount of distortion applied to the gradient mesh.
- Type:
number - Default:
5
<GradientMesh distortion={8} />swirl
The intensity of the swirl effect.
- Type:
number - Default:
0.5
<GradientMesh swirl={1.0} />speed
Animation speed multiplier.
- Type:
number - Default:
1.0
<GradientMesh speed={2.0} />scale
Scale factor for the mesh size.
- Type:
number - Default:
1
<GradientMesh scale={1.5} />offsetX
Horizontal offset of the mesh.
- Type:
number - Default:
0.0
<GradientMesh offsetX={0.2} />offsetY
Vertical offset of the mesh.
- Type:
number - Default:
0.0
<GradientMesh offsetY={-0.1} />rotation
Rotation angle in radians.
- Type:
number - Default:
90
<GradientMesh rotation={45} />waveAmp
Amplitude of the water wave effect.
- Type:
number - Default:
0.1
<GradientMesh waveAmp={0.2} />waveFreq
Frequency of the water waves.
- Type:
number - Default:
10.0
<GradientMesh waveFreq={15.0} />waveSpeed
Speed of the water wave animation.
- Type:
number - Default:
0.2
<GradientMesh waveSpeed={0.5} />grain
Intensity of the grain/noise effect using color dodge blending.
- Type:
number - Default:
0.06
<GradientMesh grain={0.1} />className
Additional CSS classes to apply to the container.
- Type:
string
<GradientMesh className="rounded-lg" />