Documentation

Riso Kit

A gradient toolkit. Design in the playground, export as a PNG, GLSL, React component, or paste-ready CSS shadow. The dev panel ships next so you can apply Riso Kit treatments directly inside your own app.

Two ways to use it

Free, public

Generator

Open the playground, design a gradient, export PNG / CSS / code. Shareable preset URLs let you hand designs to your team.

Open playground →

Coming soon

Library

npm install riso-kit — drop-in React components (<RisoKitShadow>, <RisoKitBackground>, <RisoKitAvatar>) plus a dev-mode panel for applying treatments to any element in your app.

In development

Recipes you can use today

Riso Kit Shadow (CSS recipe)Multi-layer colored glow for any element. Generated from your gradient's stops. Pure CSS, zero runtime, drop into any framework.

Plus the raw exports from the playground: PNG at HD–8K, GLSL shader for Shadertoy, and a self-contained React component (zero dependencies).

Coming next

RisoKitBackgroundReact component for full-bleed gradient sections and cards — ships with the v1 library.
RisoKitAvatarDeterministic seed-based avatars. Same name → same gradient. Ships with the v1 library.
Dev panelFloating panel inside your running app — click any element, apply a treatment, copy the snippet or AI prompt.

What works today

Live WebGL2 gradient generator with full controls
PNG export at HD, 2K, 4K, 8K — dot density matches preview
GLSL shader export (Shadertoy-ready)
Standalone React component export (zero dependencies)
Multi-layer CSS box-shadow export
Shareable preset URLs
Floating, draggable, minimizable controls panel

Roadmap

v1 library — npm install riso-kit with RisoKitShadow / RisoKitBackground / RisoKitAvatar
Dev panel — apply treatments to elements in your running app
v2 — direct source-file write, framework adapters (Vue, Svelte), bloom-on-hover, gradient masks