WebGradients

If you like WebGradients, consider supporting the project — it helps keep the tools free, fast, and ad-free.

A curated collection of 180 splendid gradients made in CSS3, .sketch, .PSD and Figma formats — free for personal and commercial use. View all the gradients here »

Made by Dima Braven · itmeo

Machine-readable data

All 180 gradients are also available as structured JSON — useful for design tools, generators, or feeding gradient data to an LLM/agent:

• gradients.json — full dataset with per-stop color positions
• gradients-parsed.json — flattened variant with zero-padded index

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

deg is the CSS gradient angle, group is the dominant color(s), gradient is the ordered list of color stops (pos in %).

Figma Plugin

Install the WebGradients Figma plugin to use all 180 gradients directly inside Figma.

How To Use

1. Download the file webgradients.css.
2. Place the file in your project folder.
3. Link the file in the <head> of your document.

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

Browser Compatibility

Some gradients use the background-blend-mode CSS property. It is supported by the majority of modern browsers. View full compatibility list (view on Caniuse) »

You can learn more about background-blend-mode here (view on MDN) »

License

WebGradients is created under the MIT license.