GradientDeck
A Tailwind Background / Text / Box Shadow Gradient Generator
FreeUI LibraryDesignHelpers21,724 impressions#73 of its week
More UI Library tools →74 free dev tools →
GradientDeck generates Tailwind CSS gradients, text effects, box shadows, glass effects and provides AI components.
- for
- Web developers and designers using Tailwind, React, or Figma.
- pricing
- free
Key features
- Gradient generator — Create background, text, and mesh gradients with live preview and copy CSS or Tailwind classes.
- Box-shadow & glass effects — Design custom box shadows and glass-style overlays and export ready code.
- AI components library — Access 109 AI-powered React and Tailwind components that can be added via the shadcn CLI.
- Figma plugin — Apply gradients, palettes, meshes and glass effects directly inside Figma files.
- Design skill for AI agents — Provide a DESIGN.md for Claude, Codex or Cursor so AI agents build pages that match your design.
- Palette tools — Generate color palettes, visualize them, and copy HEX/RGB/HSL values.
Use cases
- Generate a gradient background for a landing page and copy Tailwind classes.
- Add a text gradient effect to a hero heading without writing CSS.
- Insert a ready-made AI component like a prompt-input card into a React project.
- Create a glass-morphism card design in Figma and export the CSS.
- Provide a DESIGN.md to an AI coding agent for consistent UI generation.
GradientDeck vs alternatives
 GradientDeck |  Figma |  Framer |  shadcn/ui |  Tail Lens for Tailwind | |
|---|---|---|---|---|---|
| Best for | Tailwind gradient and UI code generation | Collaborative interface design | Design-first website publishing | Reusable React UI components | Tailwind code inspection |
| Pricing | Free | Subscription | Subscription | Free | One time fee |
| DevHunt upvotes | 9 | 1 | 0 | 0 | 47 |
| Launched | Jan 2023 | — | — | — | Nov 2025 |
- GradientDeck vs Figma: Full-featured UI design and prototyping platform, not focused on code generation.
- GradientDeck vs Framer: Visual website builder with design-to-code, whereas GradientDeck focuses on gradient/code snippets.
- GradientDeck vs shadcn/ui: Open-source React component library you copy manually; GradientDeck adds AI-generated components.
- GradientDeck vs Tail Lens for Tailwind: Tailwind editor for inspecting and editing existing code, not for generating gradients.
GradientDeck FAQ
Can I copy the generated code directly into a Tailwind project?+
Yes, you can copy CSS, Tailwind classes, SVG or React code from the preview.
Is there a way to use GradientDeck with Figma?+
A GradientDeck Figma plugin lets you apply gradients, palettes, meshes and glass effects inside Figma.
What are the AI components and how are they added?+
They are pre-built React/Tailwind snippets; add them with the shadcn CLI using the provided JSON URL.
Do I need to install anything to use the Design skill with AI agents?+
Install via npm with `npx gradientdeck install` and then reference the DESIGN.md in your agent workflow.
Is GradientDeck a paid service?+
All generators, plugins and AI components are offered for free.
Summarized by DevHunt from gradientdeck.com · Nov 4, 2026. Details may change; check the official site.
.gif1688985694192.png?width=64)
