41 free CSS gradients, built in OKLCH
Five named series, use them anywhere.
every color okaybabe-original, built in OKLCH, tonally coherent within its series. no attribution required, even in the things you ship to your customers.
Aperture
6 · prismatic brand anchorSurface
19 · paper-tone libraryStudio
6 · palettes from the fieldVapor
5 · soft pastelInk
5 · high-contrast editorialtake the format you need.
every file is a v1.0.0 release asset. free forever.
Questions, answered.
Are the gradients free to use?
Yes. The full pack is MIT licensed, free for personal and commercial projects, with no attribution required.
Do I need attribution in client work?
No. You can use the gradients in sites, apps, and deliverables you ship to customers without crediting okaybabe.
What download formats are included?
CSS classes, SCSS variables and mixin, Tailwind v4 theme tokens, JSON, and a Sketch library with shared layer styles.
Why are the gradients built in OKLCH?
OKLCH keeps hue and lightness stable across a series, so each gradient feels tonally coherent instead of muddy when you mix stops.
Do they work with Tailwind CSS v4?
Yes. The pack includes a Tailwind v4 file with @theme tokens you can map to bg-okb-* utilities.
Is there a Figma version?
Yes. Duplicate the Figma Community file for fill styles, or download the release zip (Sketch, CSS, Tailwind v4, and more).
How do the shaders relate to this pack?
The gradient pack is flat color. The separate @okaybabe/shaders npm package adds 13 animated GLSL backgrounds as React components from the same studio.
How do I get updates?
Watch the okaybabe-gradient-pack GitHub repo or download the latest release zip from the releases page linked on this site.
+ 13 animated GLSL shaders
React wrappers with zero dependencies, plus optional react-three-fiber. Live WebGL, SSR-safe. MIT.