# WebGradients: 180 CSS Gradients, Figma Files and a JSON Dataset > A static CSS file, Sketch and PSD sources, a Figma plugin and two JSON datasets of the same 180 gradients. The useful part for most teams is the machine-readable data, not the stylesheet. **itmeo/webgradients** — 180 free CSS3, Figma, Sketch & PSD gradients — plus a JSON dataset for design tools, generators, and AI agents. - Repository: https://github.com/itmeo/webgradients - Website: https://webgradients.com - Stars: 2,482 · Forks: 141 - Language: CSS - License: MIT - Published: 2026-09-10 · Updated: 2026-09-10 · Language: en - Canonical page: https://hysenlabs.com/projects/itmeo-webgradients ## What WebGradients actually ships The repository is a curated collection of 180 gradients, produced in CSS3, Sketch, PSD and Figma formats, and released under the MIT licence. The README states they are free for personal and commercial use. The top level of the repository holds webgradients.css, gradients.json, gradients-parsed.json, a LICENSE file, the README, an AGENTS.md file and an add_gradients.md file, with a .github directory alongside them. There are no build scripts, no package manifest and no test suite in that listing. The audience is narrow and easy to state. Frontend developers who want a background that already looks designed, and who would rather copy a class than tune two hex values by hand. Designers who work in Figma, Sketch or Photoshop and want the same swatches as the developer. And, increasingly, tool authors: the README explicitly frames the JSON as useful for design tools, generators, or feeding gradient data to an LLM or agent. That last use case is the one that changes the calculus, because a static stylesheet is a solved problem while a clean gradient dataset is not. ## The JSON dataset is the more interesting artefact Two files carry the same content in different shapes. gradients.json is described as the full dataset with per-stop colour positions. gradients-parsed.json is a flattened variant with a zero-padded index. The README gives one entry verbatim, so the field semantics are documented rather than guessed: name is the human label ("Warm Flame"), index is a zero-padded string such as "001", deg is the CSS gradient angle, group is the dominant colour or colours, and gradient is the ordered list of stops, each with a color and a pos expressed as a percentage. That is a small but complete schema. An angle, an ordered stop list with positions, and a single dominant colour are enough to reconstruct the CSS linear-gradient, to render a preview swatch, or to rank gradients by hue. The zero-padded index in the parsed variant matters more than it looks: string sorting on "001" through "180" matches numeric order, which is what you want when a tool lists the collection without writing a custom comparator. The group array holding hex values rather than a name is a deliberate limitation. It gives you something to filter on, but it will not tell you that a gradient reads as warm or cool without further work. ## Installing it and using a gradient in a page The README documents a three-step manual install: download webgradients.css, place the file in your project folder, and link it in the head of your document. There is no npm package, no CDN URL and no build step named in the README, so the download is the install. The link tag is given in the README exactly as shown below. After it loads, the classes defined in the stylesheet become available to any element on the page. ```html ... ``` The README does not list the individual class names, so read them out of the file you downloaded rather than guessing. If you only need a handful of gradients, copying the specific rules out of webgradients.css into your own stylesheet avoids shipping all 180. The README does not discuss that trade-off, but it follows from the file being a single flat stylesheet with no tree-shaking path. ## Consuming the gradients from JSON instead For a generator or an agent, the JSON is the entry point. The README gives the schema of a single entry rather than a loading recipe, and the files sit at the repository root. The example object below is copied from the README and shows the fields you would map onto a picker or a preview swatch. ```json { "name": "Warm Flame", "index": "001", "deg": 45, "group": ["#F9AFAD"], "gradient": [ { "color": "#ff9a9e", "pos": 0 }, { "color": "#fad0c4", "pos": 100 } ] } ``` One thing to check before you depend on it: the README shows a single example object, not the top-level structure. Whether gradients.json is a bare array or an object keyed by name is not stated, so the first line of any integration work is to inspect the actual file. That is a documentation gap, not a defect, but it is the kind of gap that costs an hour when a tool assumes the wrong container type. ## Where WebGradients is the wrong choice The collection is fixed at 180. If your product needs a gradient derived from a tenant's brand colour, or a palette generated at runtime from a seed, this repository gives you nothing: there is no generator, no function and no parameterised template in the README. You would be copying hex values out of a static list. The browser compatibility note is the second constraint, and it is the one most likely to bite. The README states that some gradients use the background-blend-mode CSS property and that it is supported by the majority of modern browsers, linking to Caniuse and MDN for detail. That phrasing is doing real work. It means the set is not uniformly safe: a subset of the 180 depends on a property whose support you must confirm against your own browser matrix. The README does not say which gradients use it, and it does not document any fallback. If you are targeting an environment where background-blend-mode is unavailable, those entries will not render as designed, and you will need to identify them yourself. A third limit is maintenance. The last push to the repository was on 2026-08-03, so it has been touched recently, but the README shows no releases and no versioning scheme. There is no changelog entry to read and no tag to pin to. Vendoring the file means you own the diff when it changes. ## Alternatives and how the approach differs The obvious comparison is a gradient generator such as a CSS gradient picker, which produces one gradient from parameters you choose. WebGradients is the inverse: a fixed, curated list you browse and select from. A generator gives you infinite output with no curation; WebGradients gives you 180 options that someone already judged to look good together, but no way to ask for a variation. Against hand-written CSS gradients, the difference is effort against control. Two lines of linear-gradient in your own stylesheet give you exactly the colours you want and no dependency at all. WebGradients trades that for a stylesheet you did not write and cannot easily trim, in exchange for not having to pick stop positions. For a single hero background, writing it yourself is usually the better call. For a tool that needs a browsable catalogue, the JSON is the reason to take the dependency. Against design-token systems, the gap is semantics. A token set names colours by role, so a theme swap changes meaning. WebGradients names gradients by appearance, and the group field is a hex value rather than a role. That makes it a source of raw material for a token set, not a replacement for one. ## Licence and the cost of staying current The project is MIT licensed, which is the permissive end of the spectrum: it allows commercial use, modification and redistribution provided the copyright notice and licence text travel with the code. The README states the gradients are free for personal and commercial use, which is consistent with the licence file at the repository root. This is a description of what the licence says, not legal advice; if you are redistributing the gradients inside a product, read the LICENSE file and your own obligations rather than this summary. Upgrade cost is the weak point. There is no release, no tag and no changelog in the README, so there is no version number to pin and no diff summary to read before you pull. The practical consequence is that adopting webgradients.css means either vendoring a copy and treating it as frozen, or re-downloading and reviewing the change yourself. The JSON files carry the same problem. If you need reproducibility, hash the file you vendored and store that hash next to it, because the repository will not give you one. ## Conclusion Adopt WebGradients if you need a fixed, MIT-licensed set of 180 gradients to bake into a stylesheet or to feed a design tool, and you are comfortable pinning the file or the JSON because there is no versioning scheme. Do not adopt it if you need programmatic generation, runtime theming, or per-project palettes derived from a brand colour: the collection is a static list, and the README does not describe any generator. Before committing, verify three things yourself: which of the 180 gradients use background-blend-mode and whether your target browsers support it, whether the two JSON files agree on the same 180 entries, and whether you are vendoring webgradients.css or copying individual rules, since only the second option lets you drop the unused gradients. ## FAQ ### What are some websites that use gradients? The README does not list sites that use WebGradients, and it names no third-party site as an example. The only site it points to is the project's own gallery at webgradients.com, where all 180 gradients can be viewed. ### What does a gradient background mean? In this project a gradient background is a CSS background built from an ordered list of colour stops, each with a position in percent. The README's example entry shows an angle of 45 degrees and two stops, #ff9a9e at position 0 and #fad0c4 at position 100. ### What are the three types of gradients? The README does not categorise gradients into three types. WebGradients describes its entries by CSS angle, dominant colour and stop list only, so any answer about linear, radial and conic variants would come from outside this repository. ### Can you provide me with some free gradient colors for Photoshop? Yes. The repository ships the 180 gradients as .PSD files alongside the CSS3, Sketch and Figma formats, and the README states they are free for personal and commercial use under the MIT licence. ## Sources - [Issues](https://github.com/itmeo/webgradients/issues) - [itmeo/webgradients on GitHub](https://github.com/itmeo/webgradients) - [License: MIT](https://github.com/itmeo/webgradients/blob/master/LICENSE) - [Project website](https://webgradients.com) - [README](https://github.com/itmeo/webgradients/blob/master/README.md) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/itmeo-webgradients