GradientDeck

Showing 25 of 29 from the live probe.

• List GradientDeck asset kinds

  List every GradientDeck asset kind (gradients, patterns, animations, icons, palettes, etc.) with the count of available assets per kind. Call this first to learn what GradientDeck offers.

• Search GradientDeck assets

  Search the static GradientDeck catalog (gradients, patterns, CSS animations, animated icons, color palettes, Tailwind colors, mesh presets, shadows, Liquid Glass presets) by free-text query, kind, colors, or tags. Returns concise entries (no full code) by default. Use get_asset or render_asset_code for full code.

• Get a GradientDeck asset

  Fetch a single GradientDeck asset by its stable id (e.g. gradient.from-amber-200-to-yellow-500, pattern.top-gradient-radial, animation.scale-up-center, icon.rocket). Returns the full asset record and recommended output formats.

• Render asset as code

  Convert a known GradientDeck asset into code for a specific format (css, tailwind, react, tsx, jsx, html, svg, json).

• Generate a background gradient

  Generate a new background gradient. Provide colors, or describe a mood/useCase to pick a palette. Returns CSS and/or Tailwind (default).

• Generate a text gradient

  Generate a clipped text gradient (background-clip: text). Returns CSS, Tailwind, React/TSX, or HTML.

• Generate a pattern background

  Generate a CSS pattern background (grid, dots, diagonal, waves, checker, radial, geometric). Returns CSS, Tailwind (inline), React/TSX, or SVG.

• Get CSS animation

  Get a CSS @keyframes animation by name/intent, with optional duration, delay, easing, iteration, direction, fill mode overrides. Returns CSS (default), Tailwind, or React/TSX.

• Get an animated icon

  Generate an animated icon component (lucide-react + motion by default, or a dependency-free inline SVG). Choose animation: float, pulse, spin, bounce, wiggle, fade.

• Generate a color palette

  Generate a color palette from a seed color (harmony-based) or a mood/useCase. Optionally include Tailwind mapping, CSS variables, and a dark mode variant.

• Map a color to Tailwind

  Find the closest Tailwind CSS color(s) to any hex/rgb/hsl/named color, using perceptual RGB distance. Returns ranked matches with distances.

• Check WCAG contrast

  Check the WCAG contrast ratio between a foreground and background color (AA/AAA for normal and large text), with suggested accessible alternatives.

• Generate a blob SVG

  Generate an organic blob SVG path. Supports a seed for deterministic output. Returns SVG (default), React/TSX, or CSS background.

• Generate a mesh gradient

  Generate a mesh gradient from colors or explicit points (layered radial-gradients). No WebGL. Returns CSS (default), Tailwind, React/TSX, or SVG.

• Generate Liquid Glass

  Generate an Apple-style Liquid Glass treatment: translucent tint, blur, saturation, contrast, border, rim light, specular shine, and shadow. Returns CSS (default), Tailwind, or React/TSX.

• Generate a box shadow

  Generate a box shadow by style (soft, sharp, elevated, inner, neon, material) and elevation. Returns CSS (default), Tailwind, or React/TSX.

• Compose a full UI treatment

  The killer tool. Compose multiple GradientDeck abilities (mesh gradient, pattern overlay, text gradient, liquid glass surface, shadow, animation, icon) into one production-ready React/Next.js component for a hero, pricing, card, CTA, dashboard, empty state, login, navbar, footer, or section.

• Recommend a design direction

  The design advisor. Given what you're building (product, audience, mood, platform), returns a full design direction — palette, background, pattern, shadows, typography, motion, radius — with the RATIONALE for each choice, do/don'ts, and accessibility notes. Grounded in curated recipes. Use this instead of guessing which assets to combine.

• Critique a UI design

  Review a component (code or description) and return structured findings: WCAG contrast failures (with exact alternatives), radius/shadow/hierarchy/a11y issues, plus strengths and quick wins. Grounded — contrast is computed, not guessed.

• Explain a design concept

  Explain a design concept (Liquid Glass, mesh gradient, elevation, color harmony, text gradient, patterns, animation principles, accessibility) — when to use, when not to, pitfalls, how to implement, and 3 catalog examples with code. Grounded in the asset catalog.

• Generate color harmony schemes

  From a seed color, derive ALL harmony schemes (complementary, analogous, triadic, split-complementary, tetradic, monochromatic) with hex values and when-to-use guidance. The reasoning layer over generate_palette.

• Generate a full design system

  From a single seed color, generate a complete, consistent design system: 11-step brand scale, semantic colors, neutrals, radius/typography/motion/elevation tokens, and component treatments (button/card/input/modal). Output as CSS variables, Tailwind config, Style Dictionary, or Figma tokens.

• List design recipes

  List curated design recipes (premium-dark-saas-hero, fintech-trust-dashboard, playful-mobile-onboarding, etc.) — expert, opinionated design bundles. Filter by useCase/mood/industry. Each recipe bundles palette, typography, motion, do/don't, a11y, and cited assets.

• Get a design recipe

  Get the full design recipe by id — direction, rationale, do/don't, a11y, cited asset ids. Use apply_recipe to render it as a component.

• Render a recipe as a component

  Render a curated design recipe as a production-ready React/Next.js component (via compose_ui_treatment), plus the recipe's direction, rationale, do/don't, and a11y notes. Optionally override the brand color.