Animated Gradients With Code

About this plugin

Design mesh, linear, radial, angular, and diamond gradients. Adjust colors, positions, blur, and animation, then export as PNG, GIF, animation frames, or self contained HTML code. Import gradients from shapes, images, or previously exported code and continue working seamlessly.

✨ What you can do

• Create mesh gradients with 2x2 to 5x5 grids

• Design linear, radial, angular, and diamond gradients

• Drag and edit color points directly on the canvas

• Animate gradients with wave, circular, drift, mouse, and toggle modes 🌊

• Apply gradients to selected shapes as fill or stroke

• Add gradients as new frames on the canvas

• Export as PNG, GIF, animation frames, or HTML code

• Import gradients from shapes, images, or exported code

📦 Export options

• PNG high resolution static image

• GIF animated gradient with smooth looping

• Frames all animation frames arranged in a grid

• Code self contained HTML and JS with full animated playback

📥 Import options

• From Figma select a shape with a gradient fill and colors are automatically imported

• From Image upload PNG, JPG, or GIF to extract colors

• From Code paste CONFIG JSON from exported HTML to restore the gradient

🎯 Apply options

When a shape or frame is selected, choose to apply to Fill, apply to Stroke, or start fresh on a new canvas.