Open-source gradient library

Gradients,
ready to ship.

A curated collection of 328 dependency-free CSS gradients for the places where you need the right colors—not another install command.

0 packages 6 export formats ∞ places to use it

✦ +

CSS classes✦custom properties✦hex values✦JSON data✦self-hosted✦CSS classes✦custom properties

The collection

Find your next
starting point.

Stops Direction

Loading gradients in the collection

Use it your way

01Most direct

Link the generated stylesheet and use a stable gs- class anywhere CSS is accepted.

<link rel="stylesheet"
  href="./gradients.min.css" />

<section class="gs-blue-lagoon"></section>

View the CSS build →

02Flexible

Use the complete gradient or reach for each individual color stop as a custom property.

background-image: var(--gs-blue-lagoon);

color: var(--gs-blue-lagoon-color-2);

03Portable

Need a design token, or tool import? Copy the hex values or download JSON and CSV.

background-color: #0052D4;
background-image: linear-gradient(
  90deg, #0052D4, #4364F7
);

Bring the whole box

Self-host the generated files in your own project. No account, no CDN, no vendor lock-in.