Are NanoTools completely free to use?

Yes, all basic tools on NanoTools are completely free to use with no registration required. We offer premium features for power users.

Is my data secure when using NanoTools?

Your files are processed securely and are automatically deleted after processing. We do not store your files or data on our servers.

Do I need to install any software to use NanoTools?

No installation required. All tools work directly in your browser on any device - computer, tablet, or smartphone.

What file formats are supported?

We support a wide range of formats including PDF, JPG, PNG, WebP, GIF, JSON, XML, CSV, and many more depending on the tool.

NanoTools

Back to Tools

Gradient Animation Generator - Animated Gradients

Generate gradient animations online for free. Create animated color gradients. Copy CSS code.

Gradient Animation Generator

Create smooth animated CSS gradients

Color 1

Color 2

Color 3

Type

Angle: 45°

Duration: 5s

CSS Code

background: linear-gradient(45deg, #667eea, #764ba2, #f093fb);
background-size: 200% 200%;
animation: gradient 5s ease infinite;

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

What This Tool Does

Generates animated CSS gradient backgrounds
Provides live preview of gradient animation
Supports linear and radial gradients
Allows customization of colors, angle, and speed
Exports clean, production-ready CSS code

How to Use

1
Choose gradient colors
Select 2-3 colors for your gradient using color pickers
2
Adjust settings
Set gradient type (linear/radial), angle, and animation speed
3
Preview animation
Watch the live preview to see your gradient in action
4
Copy CSS code
Copy the generated CSS to use in your website

How it works

Choose gradient colors

Select 2-3 colors for your gradient using color pickers

Adjust settings

Set gradient type (linear/radial), angle, and animation speed

Preview animation

Watch the live preview to see your gradient in action

Copy CSS code

Copy the generated CSS to use in your website

Use Cases

Creating animated hero section backgrounds
Designing eye-catching call-to-action buttons
Building modern landing page backgrounds
Adding subtle movement to website sections
Creating brand-consistent gradient animations

Frequently Asked Questions

Do I need to write any code?

No, the tool generates all CSS code for you. Just copy and paste into your stylesheet.

Will it work in all browsers?

Yes, the generated CSS uses standard properties supported by all modern browsers.

Can I use more than 3 colors?

Currently limited to 3 colors for optimal animation performance and visual appeal.

How do I control animation speed?

Use the duration slider to set animation speed from 1-20 seconds per cycle.