WebGradients

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

How To Use

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

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

Browser Compatibility

Some gradients uses the background-blend-mode CSS property. It's supported by the majority of the 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.

Badges

Extracted from project README

Related Projects

spark-joy

✨😂 2000+ ways to add design flair, user delight, and whimsy to your product.

02 May 2019 9,220

building-with-backgrounds-and-gradients

Microverse School > 4. HTML & CSS3 > HTML Forms

15 Jun 2020 7

colors

Smarter defaults for colors on the web.

17 Jun 2013 9,274

SupportsCSS

Live, in-browser detection of modern CSS support for selectors, features, and at-rules. Applies s...

26 Apr 2023 272

postcss-easing-gradients

PostCSS plugin to create smooth linear-gradients that approximate easing functions.

08 Apr 2017 924

rainbow.js

A jQuery library to manage gadients easily !

10 Feb 2014 60

material-color

The colour palette, based on Google's Material Design, for use in your project.

24 Jul 2014 133

coolhue

Coolest Gradient Hues and Swatches

18 Jun 2017 3,488

uiGradients

🔴 Beautiful colour gradients for design and code

01 Sep 2014 5,917

pure

A set of small, responsive CSS modules that you can use in every web project.

22 Apr 2013 23,395

minstyle.io

👌 A simple CSS Framework, including dark mode.

08 Jul 2018 82

material-colors

Colors of Google's Material Design made available to coders

24 Jul 2014 271