About WebGradients
WebGradients is a free collection of 180 CSS gradients that you can copy into website backgrounds and interface designs. It also includes a gradient generator and a colour palette tool.
What it does
Each gradient in the collection has a name, two colour values and a button that copies its CSS code. The site also links to a generator for custom colours and a palette tool that shows a colour system on a sample landing page. Design packs for Sketch, Photoshop and Figma are offered as a bonus.
Key features
- 180 two-colour gradients with copy buttons
- Gradient generator for custom colours
- Colour palette tool for landing page previews
- Design packs for Sketch, Photoshop and Figma
Who it's for
Front-end developers who need a quick background, UI designers building mockups, and anyone who wants a starting palette for a landing page. The code is simple CSS, so it is easy to adapt to an existing project.
Pricing and good to know
The gradients are free for commercial or personal use. The source code is on GitHub under the MIT license. Gradients are a visual style, so check that colours still read well for text and in any dark theme you build.
Highlights
- 180 two-colour CSS gradients with copy buttons
- Gradient generator for custom colours
- Colour palette tool for landing page previews
- Design packs for Sketch, Photoshop and Figma
