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
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 positionsgradients-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 %).
Install the WebGradients Figma plugin to use all 180 gradients directly inside Figma.
- Download the file
webgradients.css. - Place the file in your project folder.
- Link the file in the
<head>of your document.
<html>
<head>
<link href="webgradients.css" rel="stylesheet">
</head>
...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) »
WebGradients is created under the MIT license.