Free · No signup · Works in your browser

Backgroundsthat move.Copy the CSS.

Pick your colours, direction, speed and easing — and watch the gradient move live as you tweak it.

When it looks right, copy ready-to-paste CSS for your website.

Free for every designer and developer.

Make a gradientBrowse all 22 tools
2
types — linear and radial
6
easing curves to choose
Live
preview while you edit
0
libraries or JavaScript needed

The tool

Design your gradient

Preset Palettes

Click one to start from it.

Gradient Structure

Angle / direction90deg

Color Stops

2 to 6 colors.

Animation Settings

Animation mode

Speed (duration)8s

Transition easing

Animation state

Live previewLinear 90deg

Your animated gradient

Change any setting to see it live

Generated CSS

.animated-gradient {
  background: linear-gradient(90deg, #71c66c, #ff8000, #db5779);
  background-size: 400% 400%;
  animation: gradientAnimation 8s ease infinite;
}

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

Privacy-first: your files are processed in your browser and never uploaded. The few tools that need a server — running C, C++, Java or Python code, reading a public web page, or a speed test — send only what you enter for that job.

Who it's for

Made for the people who actually use it.

  1. Web designers

    The pain

    A flat hero background looks dull, but animated ones usually mean a heavy video or a JavaScript library.

    The outcome

    A smooth moving gradient made with a few lines of pure CSS — light, fast and on-brand.

  2. Developers

    The pain

    Writing keyframes and background-size tricks from memory takes trial and error.

    The outcome

    Tested CSS with the keyframes included, ready to paste into any stylesheet or framework.

  3. Content creators

    The pain

    You want eye-catching backgrounds for landing pages and link-in-bio pages without hiring a designer.

    The outcome

    Experiment with colours and speed until it feels right, then copy and paste.

How it works

Three steps.
That's the whole manual.

Make a gradient
  1. 01

    Pick your colours

    Add the colours you want the gradient to flow through.

  2. 02

    Set the motion

    Choose linear or radial, the direction, the speed and an easing curve — the preview updates live.

  3. 03

    Copy the CSS

    Copy the generated CSS, including the keyframes, and paste it into your site.

Features

Everything you need.
Nothing you don't.

6 things it does well — and no settings page to get lost in.

  • Live preview

    See the gradient animate in real time as you change any setting.

  • Linear & radial

    Sweep across in any direction, or radiate from the centre.

  • Speed & easing

    From slow and calm to lively, with linear, ease and modern smooth curves.

  • Pure CSS output

    No JavaScript and no images — just CSS that works in every modern browser.

  • One-click copy

    Copy the full snippet, keyframes included, straight to your clipboard.

  • Private by design

    Everything is generated in your browser; nothing is uploaded.

FAQ

Questions,
answered.

6 things people ask before they use the Gradient Generator.

Still stuck? Talk to us or message us on WhatsApp.

Keep going

21 more tools.
Zero signups.

Images, PDFs, QR codes, code, design — every tool runs right here in your browser, free forever.

Explore all tools
View courses

Try next

Free · No signup

More free tools

Browse all 22 tools

Want to build tools like these? Learn web development, Python and AI at our Patna centre.

Explore courses
CallWhatsAppEnquire