uiGradients alternatives for CSS and animated gradients

uiGradients is a free, MIT-licensed collection of 382 named linear gradients. You pick one, copy three lines of CSS or download a JPG, and you're done. People look for an alternative when they want more gradients to browse, a generator to make their own, modern colour spaces, or a gradient that moves.

For a second collection with design-tool files, use WebGradients. To browse and edit palettes in one place, use Grabient or Coolors. To build your own CSS gradient, use cssgradient.io, or gradient.style for OKLab and OKLCH. For a mesh gradient image, use Meshy. For a gradient that animates on a React site, use gradients.sh.

We make gradients.sh, so read our section with that in mind. We checked every tool below on its own site on 2026-10-27.

import { LinearFlow } from "@/components/linear-flow";

// "Relay" from uiGradients: #3A1C71 → #D76D77 → #FFAF7B.
export function UiGradientsRelayDemo() {
  return (
    <LinearFlow
      background="#120b24"
      className="flex h-[360px] items-end p-8"
      colors={["#3A1C71", "#D76D77", "#FFAF7B"]}
    >
      <h2 className="text-3xl font-semibold tracking-tight text-white">
        Relay, moving
      </h2>
    </LinearFlow>
  );
}

That's uiGradients' "Relay" (#3A1C71, #D76D77, #FFAF7B) passed to the free Linear Flow component. Using a uiGradients gradient in code shows how.

What uiGradients gives you

uiGradients shows one gradient full screen with its hex codes. You can rotate it, copy its CSS, download it as a JPG, filter the list by colour, and browse all 382. New gradients come in as pull requests on its GitHub repo, which is MIT licensed and has about 6,000 stars.

The whole collection is one file, gradients.json: a name and a list of colours per gradient. Of its 382 entries, 337 have two colours, 36 have three, and none has more than six.

That's the appeal: no account, no ads, nothing to configure, and a name for every gradient. What it doesn't do is just as clear. Every gradient is a plain linear blend in sRGB that you can rotate. There's no radial, conic or mesh gradient, no grain, no animation, and you can't edit the colours on the site. The CSS it hands you also carries a legacy prefixed line, which a later section deals with.

The short version

Other gradient collections

These are the closest swaps: a page of ready-made gradients you copy from.

WebGradients by itmeo is the other long-running collection. It has 180 gradient backgrounds, mostly linear with a few radial and layered ones, each with a Copy CSS button, free for personal and commercial use. It also ships the whole set as Sketch, Photoshop and Figma files, which uiGradients doesn't, and its GitHub repo (MIT) includes a JSON dataset. The site now has a gradient generator and a palette tool too.

Grabient is a searchable library of palettes. You can search by colour or mood ("sunset", "navy"), then change the colours, steps, angle and style of any result. Each one copies as CSS or downloads as SVG or PNG, or you can share it as a URL.

Coolors is best known for palettes, and its gradient maker sits next to a gallery of named gradients. The maker does linear and radial gradients with editable stops, position and rotation, and copies the CSS. The rest of Coolors (palette extraction from photos, contrast checks, a Figma plugin) is useful if you're picking a brand palette at the same time.

CSS gradient generators

If you'd rather make the gradient than pick one, a generator is the better tool.

cssgradient.io is the standard one: drag colour stops on a bar, choose linear or radial, and copy the CSS. The site also has colour shade pages and articles about gradients.

gradient.style is the one to use for modern CSS. It builds linear, radial and conic gradients, stacks them as layers, and lets you pick the colour space the browser blends in: OKLab, OKLCH, LCH, Display P3 and others. It outputs both modern CSS and a classic fallback. Blending in OKLab usually keeps the middle of a two-colour gradient brighter and less muddy than sRGB does. It doesn't remove the grey entirely: two colours from opposite sides of the colour wheel still pass close to grey halfway, and OKLCH, which travels round the hue circle instead, avoids that. Sunset gradients in CSS measures the difference on an orange-to-indigo sky.

Meshy makes mesh gradients from a four-colour palette. Each result has an ID that recreates it, and you download a PNG at the width and height you set. It's an image, so it doesn't move and doesn't change with your theme.

Using a uiGradients gradient in code

You don't have to leave uiGradients to fix its CSS. Here's what it gives you for "Anamnisar":

background: #9796f0; /* fallback for old browsers */
background: -webkit-linear-gradient(
  to right,
  #fbc7d4,
  #9796f0
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
  to right,
  #fbc7d4,
  #9796f0
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

The middle line does nothing. The old -webkit- syntax didn't accept to right, so the browsers it targets throw it away, and current Chrome reports it as unsupported too (CSS.supports() returns false). Drop it, and tell the browser to blend in OKLab:

.hero {
  background: #9796f0;
  background: linear-gradient(to right in oklab, #fbc7d4, #9796f0);
}

Browsers that don't understand in oklab skip that line and keep the solid fallback. Gradients in light and dark mode shows how to swap the two colours per theme with CSS variables.

To make it move without JavaScript, make the background wider than the box and slide it. The Tailwind animated gradient guide has a seamless version of that loop, and CSS gradient vs WebGL gradient measures what each CSS technique costs.

For something that looks less like a slide, pass the same colours to a gradients.sh component. Every uiGradients entry has between two and six colours, which is exactly what the components accept:

npx shadcn@latest add https://gradients.sh/r/linear-flow.json

import { LinearFlow } from "@/components/linear-flow";

<LinearFlow
  background="#120b24"
  className="h-[480px]"
  colors={["#3A1C71", "#D76D77", "#FFAF7B"]}
>
  {children}
</LinearFlow>;

That's the demo at the top of this page. Linear Flow drifts the angle and the colour stops slowly on a loop that repeats exactly, blends in OKLab, and keeps a plain linear-gradient(120deg, …) of the same colours behind the canvas for browsers without WebGL. Visitors who prefer reduced motion get one still frame.

Animated gradients with gradients.sh

gradients.sh is a library of live gradient components you install with the shadcn CLI. The command copies the component, a shared surface and the engine into your project as MIT-licensed source. There are 12 free components and 39 free presets, plus 168 Pro presets.

What it adds over a copied CSS gradient:

• Shapes CSS can't draw: mesh blobs, aurora curtains, waves and grain, all drawn by the GPU. The mesh gradient generator and grainy gradient generator pages have presets to start from.
• Colours can be var(--token) values, so the gradient follows your theme and a rebrand without new hex codes.
• One free Mesh Gradient came to 52.3 KB of gzipped JavaScript up front when we measured it. A CSS gradient costs nothing, so use CSS where it's enough.

When you need a file instead, the editor exports one. With a free account you get PNG up to 1920px and H.264 MP4 up to 1080p at 60 fps, for up to 10 seconds. Pro raises that to PNG up to 16K and MP4 up to 6K or 4K60 where the browser supports them. Pro is $29 a month, $99 a year or $249 lifetime.

Where uiGradients is better: it's quicker. There's no install, no account and nothing to tune, and its 382 named gradients are more choice than our 39 free presets. If you need a static two-colour background, a copied CSS line is lighter than any component.

Which one to pick

• A named two-colour gradient in ten seconds: uiGradients is still the fastest.
• The same, with Figma, Sketch or Photoshop files: WebGradients.
• Search by colour or mood, then edit: Grabient.
• Your own linear or radial gradient: cssgradient.io.
• A gradient that blends in OKLab or OKLCH instead of sRGB, or a conic one: gradient.style.
• A mesh gradient image: Meshy.
• A gradient that moves on a React or shadcn/ui site: gradients.sh. Start with the shadcn background guide, or tune one in the editor.

Looking for alternatives to other tools? See Grainient alternatives for grainy images and loops, and ShaderGradient alternatives for 3D gradients.

How we checked

On 2026-10-27 we opened each site and used its gradient tools in Chrome. The uiGradients counts come from gradients.json in its repo and match the 382 gradients its site lists. We copied its CSS from the site's "Get css" panel and tested the three syntaxes with CSS.supports() in Chrome. Star counts and licences come from each project's GitHub repo on the same day.