Mesh Gradient Animator

Create moving, ethereal background gradients by dragging color points and recording the animation to generate @keyframes.

Preview & Editor

Drag the color points to adjust the gradient. Click "Record" and move points to generate keyframes.

Color Points

Animation Settings

Generated CSS

Features

  • Interactive drag-and-drop color points.
  • Real-time mesh gradient preview.
  • Record functionality to generate CSS @keyframes.
  • Customizable colors and point positions.

How to Use

  1. Drag the color circles on the canvas to position them.
  2. Click "Record Animation" and move the points around to create movement.
  3. Click "Stop Recording" to finish.
  4. Copy the generated CSS code to use in your project.