# Gradient Playground

> A multi-layered CSS gradient editor and animator at thewebkid.com/gradients. Combines linear, radial, and conic gradients with blend modes, opacity, stop interpolation, and keyframe animation to create complex visual compositions — kaleidoscopes, eyeballs, rainbows, spirals, and more. AI agents can create and manipulate compositions via WebMCP tools (Chrome 149+) or by generating JSON for the built-in JSON editor.

The editor works with gradient compositions called "sets." Each set contains multiple gradient layers stacked with CSS blend modes, and optionally animation keyframes with eased transitions between them.

## Schema

- [Layer JSON Reference](/llms/schema.md): Complete format for gradient layers including types, stops, properties, blend modes, opacity, and stop interpolation
- [Animation & Keyframes](/llms/animation.md): Creating animated gradients with keyframes, transition easing, duration, hold, and looping

## Creative Guide

- [Creative Techniques](/llms/creative.md): How blend modes interact to create depth, how stop interpolation creates patterns, and compositional strategies for compelling gradient art
- [Recipe Book](/llms/recipes.md): Full annotated JSON for example compositions — sunset, kaleidoscope, rainbow, eye, spirals — ready to load into the editor

## Optional

- [Embed API](/llms/embed.md): How to embed animated gradients in any webpage using the self-contained script output