WebGradients is a curated, MIT-licensed collection of 180 ready-made gradients distributed as CSS3, Sketch, PSD and Figma assets alongside a machine-readable JSON dataset, aimed at frontend developers, designers and AI-agent builders who need polished background colour treatments without composing them from scratch.

What it is

WebGradients is an open-source gradient library created by Dima Braven and itmeo. It publishes 180 gradients in four authoring formats — CSS3, .sketch, .PSD and Figma — together with two JSON datasets, gradients.json and gradients-parsed.json, that describe each gradient in structured form for design tools, generators and LLMs. The collection is free for personal and commercial use under the MIT licence, and the repository is written in CSS, with 2,478 stars and 140 forks.

The concrete problem it solves is the blank-page problem of background styling. Instead of hand-picking colour stops, angles and blend modes for every hero section or card, a developer or designer selects one of 180 pre-tuned gradients and drops it in. In the frontend ecosystem this replaces bespoke linear-gradient() declarations — and the trial and error that accompanies them — with a single stylesheet, webgradients.css, that can be linked into any document. For design work it replaces hunting through screenshots or rebuilding gradients by eye, because the same 180 presets are supplied as native Sketch, Photoshop and Figma files and as a published Figma community plugin.

Key capabilities

• 180 gradients shipped in four formats: CSS3, .sketch, .PSD and Figma.
• webgradients.css, a single stylesheet holding the CSS3 gradients, ready to link into the `` of a document.
• gradients.json, the full dataset with per-stop colour positions, where each entry carries a name, an index, a deg CSS gradient angle, a group of dominant colours, and an ordered gradient list of colour stops with pos values expressed in percent.
• gradients-parsed.json, a flattened variant of the dataset that uses a zero-padded index.
• A WebGradients Figma community plugin that exposes all 180 gradients directly inside Figma.
• Use of the background-blend-mode CSS property by some gradients, with browser compatibility documented through Caniuse and MDN.

Who uses it and how

• Frontend developers download webgradients.css, place it in a project folder and link it in the document head to style backgrounds.
• Designers working in Figma install the community plugin to apply the same 180 gradients straight onto the canvas.
• Designers working in Sketch or Photoshop open the supplied .sketch or .PSD files to reuse gradients in mockups and static assets.
• Tool authors and agent builders consume gradients.json or gradients-parsed.json to feed generators, design-token pipelines or LLM prompts, relying on the structured deg, group and gradient fields.

Getting started

Download webgradients.css from the repository, place the file in the project folder and link it in the `` of the document; the same gradients are available through the WebGradients Figma plugin or from the gallery at webgradients.com.

How it compares

The facts supplied for this entry name no comparable or competing gradient libraries, so no direct comparison against other products can be drawn here. On the available evidence, WebGradients stands alone in this registry as a curated, MIT-licensed gradient asset collection rather than a framework or runtime library.

When to use it — and when not to

There is nothing to operate: the project is a set of static files, with no database, object storage or SMTP service implied by the README, so adopting it carries no hosting or infrastructure burden. The trade-off is the inverse, in that distribution is manual — consumers download a stylesheet or dataset and update it themselves, and teams expecting a package-manager install or a live API will not find one described here. It is also a fixed catalogue of 180 presets rather than a generator, and any gradient relying on background-blend-mode will not render identically in browsers that do not support that property.

{
  "name": "Warm Flame",
  "index": "001",
  "deg": 45,
  "group": ["#F9AFAD"],
  "gradient": [
    { "color": "#ff9a9e", "pos": 0 },
    { "color": "#fad0c4", "pos": 100 }
  ]
}

<html>
  <head>
    <link href="webgradients.css" rel="stylesheet">
  </head>
  ...