WebGradients

June 13, 2026 · View on GitHub

A curated collection of splendid gradients made in CSS3, .sketch, .PSD and Figma formats. View all the gradients here »

Made by Dima Braven · itmeo

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.