{"name":"shoogle","homepage":"https://shoogle.dev","query":"mesh-gradient","pagination":{"hasMore":false,"limit":100,"offset":0,"total":100},"items":[{"addCommandArgument":"@cult-ui/gradient-heading","description":"Heading component with gradient text effects and customizable styling","name":"cult-ui/gradient-heading","registry":"@cult-ui","type":"registry:ui"},{"addCommandArgument":"@cult-ui/gradient-heading-demo","name":"cult-ui/gradient-heading-demo","registry":"@cult-ui","type":"registry:component"},{"addCommandArgument":"@cult-ui/gradient-button-group","description":"Premium layered button group with animated active state, gradient ring accents, and theme toggle underlay","name":"cult-ui/gradient-button-group","registry":"@cult-ui","type":"registry:ui"},{"addCommandArgument":"@cult-ui/bg-animated-gradient","description":"Animated gradient background component with customizable color transitions","name":"cult-ui/bg-animated-gradient","registry":"@cult-ui","type":"registry:ui"},{"addCommandArgument":"@cult-ui/gradient-button-group-demo","name":"cult-ui/gradient-button-group-demo","registry":"@cult-ui","type":"registry:component"},{"addCommandArgument":"@cult-ui/bg-animated-gradient-demo","name":"cult-ui/bg-animated-gradient-demo","registry":"@cult-ui","type":"registry:component"},{"addCommandArgument":"@cult-ui/hero-static-radial-gradient","description":"Split-layout hero section with responsive StaticRadialGradient shader visuals, CTA, and tech stack badges","name":"cult-ui/hero-static-radial-gradient","registry":"@cult-ui","type":"registry:ui"},{"addCommandArgument":"@cult-ui/hero-static-radial-gradient-demo","name":"cult-ui/hero-static-radial-gradient-demo","registry":"@cult-ui","type":"registry:component"},{"addCommandArgument":"@neon-ui/mesh-gradient","description":"The Neon brand-deck gradient as a live WebGL surface: a defocused warm color field drifting over near-black.","name":"neon-ui/mesh-gradient","registry":"@neon-ui","type":"registry:component"},{"addCommandArgument":"@ui-layouts/mesh-gradient-background","name":"ui-layouts/mesh-gradient-background","registry":"@ui-layouts","type":"registry:component"},{"addCommandArgument":"@ui-layouts/mesh-gradient-background2","name":"ui-layouts/mesh-gradient-background2","registry":"@ui-layouts","type":"registry:component"},{"addCommandArgument":"@ui-layouts/mesh-gradient-background3","name":"ui-layouts/mesh-gradient-background3","registry":"@ui-layouts","type":"registry:component"},{"addCommandArgument":"@remocn/mesh-gradient-bg","description":"Living gradient with amorphous color blobs slowly drifting across the frame.","name":"remocn/mesh-gradient-bg","registry":"@remocn","type":"registry:component"},{"addCommandArgument":"@aceternity/hero-section-with-mesh-gradient","description":"Hero Section With Mesh Gradient","name":"aceternity/hero-section-with-mesh-gradient","registry":"@aceternity","type":"registry:block"},{"addCommandArgument":"@shadcn-ui-blocks/marketing-hero-sections-gradient-mesh-hero","description":"A hero with a soft mesh gradient behind a centered headline and CTA. Gives a calm, premium backdrop to SaaS, design, and startup landing pages.","name":"shadcn-ui-blocks/marketing-hero-sections-gradient-mesh-hero","registry":"@shadcn-ui-blocks","type":"registry:block"},{"addCommandArgument":"@ui-layouts/mesh-shadergradient","name":"ui-layouts/mesh-shadergradient","registry":"@ui-layouts","type":"registry:component"},{"addCommandArgument":"@termcn/gradient","description":"Color gradient text","name":"termcn/gradient","registry":"@termcn","type":"registry:ui"},{"addCommandArgument":"@nexus-labs/background-gradient","description":"Animated gradient wrapper with soft glow and blur for cards, buttons, and hero sections.","name":"nexus-labs/background-gradient","registry":"@nexus-labs","type":"registry:component"},{"addCommandArgument":"@23rd/shader-gradient","description":"A subtle animated WebGL gradient wash that follows shadcn light/dark theme — soft color blobs and optional pointer follow.","name":"23rd/shader-gradient","registry":"@23rd","type":"registry:ui"},{"addCommandArgument":"@cnippet/text-gradient","description":"Animated gradient colors flowing through text","name":"cnippet/text-gradient","registry":"@cnippet","type":"registry:ui"},{"addCommandArgument":"@ai2/buttons-gradient","description":"Styled buttons: the Gradient set. 5 decorative buttons variations (FlowButton, ConicButton, DuotoneButton, AuroraButton, SunsetButton) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.","name":"ai2/buttons-gradient","registry":"@ai2","type":"registry:component"},{"addCommandArgument":"@atelier/gradient-flow","description":"An animated flowing gradient background.","name":"atelier/gradient-flow","registry":"@atelier","type":"registry:component"},{"addCommandArgument":"@paceui-gsap/gradient-shadow","description":"Smooth horizontal gradient flow, creating a subtle glowing hover shadow effect.","name":"paceui-gsap/gradient-shadow","registry":"@paceui-gsap","type":"registry:ui"},{"addCommandArgument":"@componentry/prism-gradient","name":"componentry/prism-gradient","registry":"@componentry","type":"registry:ui"},{"addCommandArgument":"@componentry/dither-gradient","name":"componentry/dither-gradient","registry":"@componentry","type":"registry:ui"},{"addCommandArgument":"@componentry/animated-gradient","name":"componentry/animated-gradient","registry":"@componentry","type":"registry:ui"},{"addCommandArgument":"@svelte-bits/gradient-text","description":"Animated multi-color gradient text with optional border, direction, yoyo and pause-on-hover.","name":"svelte-bits/gradient-text","registry":"@svelte-bits","type":"registry:component"},{"addCommandArgument":"@svelte-bits/gradient-blinds","description":"Animated gradient blinds with spotlight tracking.","name":"svelte-bits/gradient-blinds","registry":"@svelte-bits","type":"registry:component"},{"addCommandArgument":"@kokonutui/gradient-button","description":"That was so hard to make.","name":"kokonutui/gradient-button","registry":"@kokonutui","type":"registry:component"},{"addCommandArgument":"@ui-layouts/gradient-border","name":"ui-layouts/gradient-border","registry":"@ui-layouts","type":"registry:component"},{"addCommandArgument":"@ui-layouts/liquid-gradient","name":"ui-layouts/liquid-gradient","registry":"@ui-layouts","type":"registry:component"},{"addCommandArgument":"@termcn/opentui-gradient","description":"Color gradient text","name":"termcn/opentui-gradient","registry":"@termcn","type":"registry:ui"},{"addCommandArgument":"@pacekit-gsap/gradient-shadow","description":"Smooth horizontal gradient flow, creating a subtle glowing hover shadow effect.","name":"pacekit-gsap/gradient-shadow","registry":"@pacekit-gsap","type":"registry:ui"},{"addCommandArgument":"@aceternity/background-gradient","name":"aceternity/background-gradient","registry":"@aceternity","type":"registry:ui"},{"addCommandArgument":"@vue-bits/GradientText","description":"Animated gradient sweep across live text with speed and color control.","name":"vue-bits/GradientText","registry":"@vue-bits","type":"registry:component"},{"addCommandArgument":"@vue-bits/GradientBlinds","description":"Layered gradient blinds with spotlight and noise distortion.","name":"vue-bits/GradientBlinds","registry":"@vue-bits","type":"registry:component"},{"addCommandArgument":"@grootstudio/gradient-background-text","description":"Animated gradient background orb text with 3D engraved effect. Works on any background color.","name":"grootstudio/gradient-background-text","registry":"@grootstudio","type":"registry:block"},{"addCommandArgument":"@grootstudio/gradient-text-fill","description":"Animated gradient fills the text itself with 3D depth. Works on any background color.","name":"grootstudio/gradient-text-fill","registry":"@grootstudio","type":"registry:block"},{"addCommandArgument":"@uiable/uiable-badge-gradient","description":"Badge Gradient variant for component.","name":"uiable/uiable-badge-gradient","registry":"@uiable","type":"registry:ui"},{"addCommandArgument":"@componentry/gradient-hero-01","name":"componentry/gradient-hero-01","registry":"@componentry","type":"registry:block"},{"addCommandArgument":"@ui-layouts/liquid-gradient-components","name":"ui-layouts/liquid-gradient-components","registry":"@ui-layouts","type":"registry:component"},{"addCommandArgument":"@ui-layouts/btn-rotating-gradient","name":"ui-layouts/btn-rotating-gradient","registry":"@ui-layouts","type":"registry:component"},{"addCommandArgument":"@ui-layouts/btn-animated-gradient","name":"ui-layouts/btn-animated-gradient","registry":"@ui-layouts","type":"registry:component"},{"addCommandArgument":"@magicui/animated-gradient-text","description":"An animated gradient background which transitions between colors for text.","name":"magicui/animated-gradient-text","registry":"@magicui","type":"registry:ui"},{"addCommandArgument":"@magicui/neon-gradient-card","description":"A beautiful neon card effect","name":"magicui/neon-gradient-card","registry":"@magicui","type":"registry:ui"},{"addCommandArgument":"@animate-ui/primitives-texts-gradient","description":"A gradient text animation.","name":"animate-ui/primitives-texts-gradient","registry":"@animate-ui","type":"registry:ui"},{"addCommandArgument":"@animate-ui/components-backgrounds-gradient","description":"A background component featuring a subtle yet engaging animated gradient effect, smoothly transitioning colors to enhance visual depth.","name":"animate-ui/components-backgrounds-gradient","registry":"@animate-ui","type":"registry:ui"},{"addCommandArgument":"@aceternity/lines-gradient-shader","description":"A lines gradient shader for creating animated gradient backgrounds.","name":"aceternity/lines-gradient-shader","registry":"@aceternity","type":"registry:block"},{"addCommandArgument":"@aceternity/stats-with-gradient","description":"Stats With Gradient","name":"aceternity/stats-with-gradient","registry":"@aceternity","type":"registry:block"},{"addCommandArgument":"@aceternity/hover-border-gradient","name":"aceternity/hover-border-gradient","registry":"@aceternity","type":"registry:ui"},{"addCommandArgument":"@aceternity/background-gradient-animation","name":"aceternity/background-gradient-animation","registry":"@aceternity","type":"registry:ui"},{"addCommandArgument":"@ncdai/fluid-gradient-text","description":"Render text with a fluid gradient that shifts with pointer movement.","name":"ncdai/fluid-gradient-text","registry":"@ncdai","type":"registry:component"},{"addCommandArgument":"@uitripled/gradient-animation-shadcnui","description":"Smoothly transitioning gradient background","name":"uitripled/gradient-animation-shadcnui","registry":"@uitripled","type":"registry:ui"},{"addCommandArgument":"@uitripled/floating-gradient-shadcnui","description":"Animated floating gradient background effect","name":"uitripled/floating-gradient-shadcnui","registry":"@uitripled","type":"registry:ui"},{"addCommandArgument":"@unlumen-ui/primitives-texts-gradient","description":"A gradient text animation.","name":"unlumen-ui/primitives-texts-gradient","registry":"@unlumen-ui","type":"registry:ui"},{"addCommandArgument":"@cnippet/m-text-gradient-3","description":"Pricing cards — each tier has its own palette and speed","name":"cnippet/m-text-gradient-3","registry":"@cnippet","type":"registry:block"},{"addCommandArgument":"@cnippet/m-text-gradient-2","description":"Inline word accent — single word with fast orange-to-green sweep inside static heading","name":"cnippet/m-text-gradient-2","registry":"@cnippet","type":"registry:block"},{"addCommandArgument":"@cnippet/m-text-gradient-1","description":"Hero heading — violet to cyan looping gradient sweep","name":"cnippet/m-text-gradient-1","registry":"@cnippet","type":"registry:block"},{"addCommandArgument":"@uiable/uiable-button-animated-gradient","description":"Button Animated Gradient variant for component.","name":"uiable/uiable-button-animated-gradient","registry":"@uiable","type":"registry:ui"},{"addCommandArgument":"@shadcn-ui-blocks/marketing-stats-gradient-grid","description":"A grid of stat tiles washed in soft gradients for a vivid, modern look. Use it to display headline metrics when you want the section to feel premium.","name":"shadcn-ui-blocks/marketing-stats-gradient-grid","registry":"@shadcn-ui-blocks","type":"registry:block"},{"addCommandArgument":"@shadcn-ui-blocks/components-tabs-gradient-tabs","description":"Tabs with a soft color gradient on the active trigger for a vivid accent. Use them on landing pages or feature views where the switcher should draw the eye.","name":"shadcn-ui-blocks/components-tabs-gradient-tabs","registry":"@shadcn-ui-blocks","type":"registry:block"},{"addCommandArgument":"@shadcnblocks/chart-chart-area-gradient","description":"An area chart with gradient fill using shadcn ChartContainer and Recharts.","name":"shadcnblocks/chart-chart-area-gradient","registry":"@shadcnblocks","type":"registry:block"},{"addCommandArgument":"@magicui/animated-gradient-text-demo","description":"Example showing text with animated gradient backgrounds.","name":"magicui/animated-gradient-text-demo","registry":"@magicui","type":"registry:example"},{"addCommandArgument":"@magicui/dot-pattern-linear-gradient","description":"Example showing a dot pattern with linear gradient effects.","name":"magicui/dot-pattern-linear-gradient","registry":"@magicui","type":"registry:example"},{"addCommandArgument":"@magicui/hexagon-pattern-linear-gradient","description":"Example showing a hexagon pattern with linear gradient effects.","name":"magicui/hexagon-pattern-linear-gradient","registry":"@magicui","type":"registry:example"},{"addCommandArgument":"@magicui/grid-pattern-linear-gradient","description":"Example showing a grid pattern with linear gradient effects.","name":"magicui/grid-pattern-linear-gradient","registry":"@magicui","type":"registry:example"},{"addCommandArgument":"@magicui/neon-gradient-card-demo","description":"Example showing a beautiful neon card effect.","name":"magicui/neon-gradient-card-demo","registry":"@magicui","type":"registry:example"},{"addCommandArgument":"@animate-ui/demo-primitives-texts-gradient","description":"Demo showing an animated gradient text.","name":"animate-ui/demo-primitives-texts-gradient","registry":"@animate-ui","type":"registry:ui"},{"addCommandArgument":"@animate-ui/demo-components-backgrounds-gradient","description":"Demo showing a gradient background.","name":"animate-ui/demo-components-backgrounds-gradient","registry":"@animate-ui","type":"registry:ui"},{"addCommandArgument":"@aceternity/login-form-with-gradient","description":"Login Form With Gradient","name":"aceternity/login-form-with-gradient","registry":"@aceternity","type":"registry:block"},{"addCommandArgument":"@uitripled/mood-gradient-button-shadcnui","description":"Button with background gradient that shifts based on hover angle","name":"uitripled/mood-gradient-button-shadcnui","registry":"@uitripled","type":"registry:ui"},{"addCommandArgument":"@shadcn-ui-blocks/marketing-hero-sections-gradient-background","description":"A hero on a rich gradient background with a centered headline, subtext, and CTA. A bold, color led opener for product and campaign landing pages.","name":"shadcn-ui-blocks/marketing-hero-sections-gradient-background","registry":"@shadcn-ui-blocks","type":"registry:block"},{"addCommandArgument":"@shadcn-ui-blocks/marketing-hero-sections-animated-gradient","description":"A hero set on a slowly shifting gradient backdrop with a centered headline and CTA. A colorful, lively opener for SaaS and creative product pages.","name":"shadcn-ui-blocks/marketing-hero-sections-animated-gradient","registry":"@shadcn-ui-blocks","type":"registry:block"},{"addCommandArgument":"@shadcn-ui-blocks/marketing-cta-sections-gradient-cta","description":"A centered call to action set on a vivid gradient panel with a headline and button. A bright closing section for a homepage or feature page.","name":"shadcn-ui-blocks/marketing-cta-sections-gradient-cta","registry":"@shadcn-ui-blocks","type":"registry:block"},{"addCommandArgument":"@shadcn-ui-blocks/components-cards-gradient-border-card","description":"A card edged with a static gradient outline that adds color without noise. Use it to set apart a key offer or profile in an otherwise plain grid.","name":"shadcn-ui-blocks/components-cards-gradient-border-card","registry":"@shadcn-ui-blocks","type":"registry:block"},{"addCommandArgument":"@shadcn-ui-blocks/components-badges-gradient-border-badge","description":"A badge wrapped in a colorful gradient outline around plain fill. Use it to mark beta, pro, or featured labels that need a vivid accent edge.","name":"shadcn-ui-blocks/components-badges-gradient-border-badge","registry":"@shadcn-ui-blocks","type":"registry:block"},{"addCommandArgument":"@magicui/animated-gradient-text-demo-2","description":"Second example showing text with animated gradient backgrounds.","name":"magicui/animated-gradient-text-demo-2","registry":"@magicui","type":"registry:example"},{"addCommandArgument":"@ncdai/theme-toggle-effect-polygon-gradient","name":"ncdai/theme-toggle-effect-polygon-gradient","registry":"@ncdai","type":"registry:style"},{"addCommandArgument":"@evilcharts/ex-gradient-colors-sankey-chart","name":"evilcharts/ex-gradient-colors-sankey-chart","registry":"@evilcharts","type":"registry:block"},{"addCommandArgument":"@evilcharts/ex-gradient-colors-radar-chart","name":"evilcharts/ex-gradient-colors-radar-chart","registry":"@evilcharts","type":"registry:block"},{"addCommandArgument":"@evilcharts/ex-gradient-colors-radial-chart","name":"evilcharts/ex-gradient-colors-radial-chart","registry":"@evilcharts","type":"registry:block"},{"addCommandArgument":"@evilcharts/ex-gradient-colors-pie-chart","name":"evilcharts/ex-gradient-colors-pie-chart","registry":"@evilcharts","type":"registry:block"},{"addCommandArgument":"@evilcharts/ex-gradient-variant-composed-chart","name":"evilcharts/ex-gradient-variant-composed-chart","registry":"@evilcharts","type":"registry:block"},{"addCommandArgument":"@evilcharts/ex-gradient-colors-composed-chart","name":"evilcharts/ex-gradient-colors-composed-chart","registry":"@evilcharts","type":"registry:block"},{"addCommandArgument":"@evilcharts/ex-gradient-variant-bar-chart","name":"evilcharts/ex-gradient-variant-bar-chart","registry":"@evilcharts","type":"registry:block"},{"addCommandArgument":"@evilcharts/ex-gradient-colors-bar-chart","name":"evilcharts/ex-gradient-colors-bar-chart","registry":"@evilcharts","type":"registry:block"},{"addCommandArgument":"@evilcharts/ex-gradient-colors-line-chart","name":"evilcharts/ex-gradient-colors-line-chart","registry":"@evilcharts","type":"registry:block"},{"addCommandArgument":"@evilcharts/ex-gradient-colors-area-chart","name":"evilcharts/ex-gradient-colors-area-chart","registry":"@evilcharts","type":"registry:block"},{"addCommandArgument":"@aceternity/modern-hero-with-gradients","description":"Modern Hero With Gradients","name":"aceternity/modern-hero-with-gradients","registry":"@aceternity","type":"registry:block"},{"addCommandArgument":"@react-bits/GradientBlinds-TS-TW","description":"Layered gradient blinds with spotlight and noise distortion.","name":"react-bits/GradientBlinds-TS-TW","registry":"@react-bits","type":"registry:component"},{"addCommandArgument":"@react-bits/GradientBlinds-TS-CSS","description":"Layered gradient blinds with spotlight and noise distortion.","name":"react-bits/GradientBlinds-TS-CSS","registry":"@react-bits","type":"registry:component"},{"addCommandArgument":"@react-bits/GradientBlinds-JS-TW","description":"Layered gradient blinds with spotlight and noise distortion.","name":"react-bits/GradientBlinds-JS-TW","registry":"@react-bits","type":"registry:component"},{"addCommandArgument":"@react-bits/GradientBlinds-JS-CSS","description":"Layered gradient blinds with spotlight and noise distortion.","name":"react-bits/GradientBlinds-JS-CSS","registry":"@react-bits","type":"registry:component"},{"addCommandArgument":"@react-bits/GradientText-TS-TW","description":"Animated gradient sweep across live text with speed and color control.","name":"react-bits/GradientText-TS-TW","registry":"@react-bits","type":"registry:component"},{"addCommandArgument":"@react-bits/GradientText-TS-CSS","description":"Animated gradient sweep across live text with speed and color control.","name":"react-bits/GradientText-TS-CSS","registry":"@react-bits","type":"registry:component"},{"addCommandArgument":"@react-bits/GradientText-JS-TW","description":"Animated gradient sweep across live text with speed and color control.","name":"react-bits/GradientText-JS-TW","registry":"@react-bits","type":"registry:component"},{"addCommandArgument":"@react-bits/GradientText-JS-CSS","description":"Animated gradient sweep across live text with speed and color control.","name":"react-bits/GradientText-JS-CSS","registry":"@react-bits","type":"registry:component"},{"addCommandArgument":"@shadcn-ui-blocks/components-cards-border-gradient-animation-card","description":"A card framed by a shifting gradient border that flows around the edges. Use it to highlight a premium tier or hero item in a grid of options.","name":"shadcn-ui-blocks/components-cards-border-gradient-animation-card","registry":"@shadcn-ui-blocks","type":"registry:block"},{"addCommandArgument":"@evilcharts/ex-gradient-colors-bump-line-chart","name":"evilcharts/ex-gradient-colors-bump-line-chart","registry":"@evilcharts","type":"registry:block"},{"addCommandArgument":"@evilcharts/ex-gradient-area-variant-area-chart","name":"evilcharts/ex-gradient-area-variant-area-chart","registry":"@evilcharts","type":"registry:block"}],"totalResults":100,"timestamp":"2026-08-04T11:07:15.224Z"}