New109 AI Components for React and Tailwind
Free CSS generators for gradients and color.
Make gradients, shadows, glass effects, and palettes in the browser. Preview the result, then copy CSS, Tailwind, SVG, or React into your project.
Also a Figma plugin, plus GradientDeck UI and Skill for building with an AI agent.
background-color: #50E3C2;
background-image: radial-gradient(at 47% 33%, hsl(162.00, 77%, 40%) 0, transparent 59%),
radial-gradient(at 82% 65%, hsl(198.00, 100%, 50%) 0, transparent 55%);109 AI Components for React and Tailwind.
What a normal UI kit leaves out. Copy one, or add it with the shadcn CLI.
Browse all 109 components
npx shadcn@latest add https://gradientdeck.com/ai-components/r/prompt-input-card.json13 tools for backgrounds, motion, and color.
Pick a tool, adjust the preview, and copy the code.
Backgrounds and surfaces7
More from GradientDeck.
For design files, and for building with an AI coding agent.
GradientDeck UI
Give your agent the design of a site you admire: its colors, type, spacing and rules, written as a DESIGN.md it can follow.
GradientDeck Skill
A free design skill for Claude Code, Codex and Cursor, so the pages your agent builds look made, not generated.
npx gradientdeck installFigma plugin
Apply gradients, palettes, meshes and glass effects directly in a Figma file.
From the journal.
Start with a gradient.
Pick colors and a direction, then copy the CSS or Tailwind classes.