mcpField
T
tailwind-gradient-builder

tailwind-gradient-builder

github.com/patricio0312rev设计与 UI63309 次安装41 周前更新
代码仓库

关于 tailwind-gradient-builder

用于制作 Tailwind CSS 背景、文字、边框和动画渐变的技能，涵盖多种渐变类型与视觉效果，并提供对比度、性能和无障碍检查建议。

主要功能

  1. 01线性、径向、锥形和网格渐变
  2. 02渐变文字与边框
  3. 03动画渐变样式
  4. 04玻璃效果与渐变叠层
  5. 05对比度和性能检查

适用场景

  1. 01设置页面背景和文字样式
  2. 02制作动画渐变边框
  3. 03构建玻璃风格卡片
  4. 04检查渐变可读性和回退方案

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/patricio0312rev/skills --skill tailwind-gradient-builder

安装后在 Claude Code 中输入/tailwind-gradient-builder确认已加载。

详细介绍

Tailwind 渐变生成器

使用 Tailwind CSS 为背景、文本、边框和动画创建惊艳的现代渐变。

核心工作流

  1. 选择渐变类型：线性、径向、锥形或网格
  2. 选择调色板：定义色标和位置
  3. 设置方向/角度：配置渐变方向
  4. 应用效果：模糊、动画、玻璃拟态
  5. 优化：确保性能和无障碍性

基础线性渐变

简单双色渐变

<div class="bg-gradient-to-r from-blue-500 to-purple-600"></div>


<div class="bg-gradient-to-b from-cyan-400 to-blue-600"></div>


<div class="bg-gradient-to-br from-pink-500 to-orange-400"></div>
方向类
类方向
bg-gradient-to-t从底部到顶部
bg-gradient-to-tr从左下到右上
bg-gradient-to-r从左到右
bg-gradient-to-br从左上到右下
bg-gradient-to-b从顶部到底部
bg-gradient-to-bl从右上到左下
bg-gradient-to-l从右到左
bg-gradient-to-tl从右下到左上
三色渐变

<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>


<div class="bg-gradient-to-r from-orange-500 via-red-500 to-pink-500"></div>


<div class="bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-500"></div>

现代渐变预设

极光
<div class="bg-gradient-to-r from-green-300 via-blue-500 to-purple-600"></div>
日落氛围
<div class="bg-gradient-to-r from-amber-200 via-rose-400 to-violet-500"></div>
霓虹光晕
<div class="bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500"></div>
森林薄雾
<div class="bg-gradient-to-br from-emerald-400 via-teal-500 to-cyan-600"></div>
午夜都市
<div class="bg-gradient-to-b from-gray-900 via-purple-900 to-violet-600"></div>
桃色日落
<div class="bg-gradient-to-r from-rose-100 via-pink-300 to-orange-200"></div>

渐变文本


<h1 class="bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 bg-clip-text text-transparent">
  Gradient Text
</h1>


<h1 class="animate-gradient bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 bg-[length:200%_auto] bg-clip-text text-transparent">
  Animated Gradient
</h1>
动画渐变文本的 Tailwind 配置
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        gradient: 'gradient 3s ease infinite',
      },
      keyframes: {
        gradient: {
          '0%, 100%': { backgroundPosition: '0% 50%' },
          '50%': { backgroundPosition: '100% 50%' },
        },
      },
    },
  },
};

径向渐变


<div class="bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-900 via-indigo-800 to-slate-900"></div>


<div class="bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-amber-200 via-violet-600 to-sky-900"></div>


<div class="bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-white to-gray-300"></div>
径向位置变体

<div class="bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-sky-400 to-indigo-900"></div>


<div class="bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-rose-400 to-orange-300"></div>


<div class="bg-[radial-gradient(ellipse_at_30%_70%,_var(--tw-gradient-stops))] from-emerald-300 to-cyan-800"></div>

锥形渐变


<div class="bg-[conic-gradient(from_0deg,_red,_yellow,_lime,_aqua,_blue,_magenta,_red)] rounded-full"></div>


<div class="bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-yellow-200 via-emerald-200 to-yellow-200"></div>


<div class="bg-[conic-gradient(from_45deg,_#3b82f6_0deg_120deg,_#10b981_120deg_240deg,_#f59e0b_240deg_360deg)] rounded-full"></div>

网格渐变

CSS 网格渐变（多个径向渐变）
<div class="relative min-h-screen overflow-hidden">
  
  <div class="absolute inset-0 bg-slate-950"></div>

  
  <div class="absolute inset-0 bg-[radial-gradient(at_40%_20%,hsla(240,100%,70%,0.3)_0px,transparent_50%)]"></div>
  <div class="absolute inset-0 bg-[radial-gradient(at_80%_0%,hsla(189,100%,56%,0.3)_0px,transparent_50%)]"></div>
  <div class="absolute inset-0 bg-[radial-gradient(at_0%_50%,hsla(355,100%,66%,0.3)_0px,transparent_50%)]"></div>
  <div class="absolute inset-0 bg-[radial-gradient(at_80%_50%,hsla(340,100%,70%,0.3)_0px,transparent_50%)]"></div>
  <div class="absolute inset-0 bg-[radial-gradient(at_0%_100%,hsla(269,100%,70%,0.3)_0px,transparent_50%)]"></div>
</div>
可复用的网格组件
// MeshGradient.tsx
interface MeshGradientProps {
  colors?: string[];
  className?: string;
}

export function MeshGradient({
  colors = [
    'hsla(240,100%,70%,0.3)',
    'hsla(189,100%,56%,0.3)',
    'hsla(355,100%,66%,0.3)',
    'hsla(340,100%,70%,0.3)',
  ],
  className = ''
}: MeshGradientProps) {
  const positions = ['40%_20%', '80%_0%', '0%_50%', '80%_50%'];

  return (
    <div className={`relative ${className}`}>
      <div className="absolute inset-0 bg-slate-950" />
      {colors.map((color, i) => (
        <div
          key={i}
          className="absolute inset-0"
          style={{
            background: `radial-gradient(at ${positions[i]}, ${color} 0px, transparent 50%)`
          }}
        />
      ))}
    </div>
  );
}

动画渐变

流动渐变动画
<div class="animate-gradient-x bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 bg-[length:200%_auto]"></div>

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        'gradient-x': 'gradient-x 3s ease infinite',
        'gradient-y': 'gradient-y 3s ease infinite',
        'gradient-xy': 'gradient-xy 3s ease infinite',
      },
      keyframes: {
        'gradient-x': {
          '0%, 100%': {
            'background-size': '200% 200%',
            'background-position': 'left center',
          },
          '50%': {
            'background-size': '200% 200%',
            'background-position': 'right center',
          },
        },
        'gradient-y': {
          '0%, 100%': {
            'background-size': '200% 200%',
            'background-position': 'center top',
          },
          '50%': {
            'background-size': '200% 200%',
            'background-position': 'center bottom',
          },
        },
        'gradient-xy': {
          '0%, 100%': {
            'background-size': '400% 400%',
            'background-position': 'left top',
          },
          '50%': {
            'background-size': '400% 400%',
            'background-position': 'right bottom',
          },
        },
      },
    },
  },
};
呼吸/脉冲渐变
<div class="animate-pulse-gradient bg-gradient-to-r from-blue-500 to-purple-600"></div>

// Add to tailwind.config.js
{
  animation: {
    'pulse-gradient': 'pulse-gradient 4s ease-in-out infinite',
  },
  keyframes: {
    'pulse-gradient': {
      '0%, 100%': { opacity: '1' },
      '50%': { opacity: '0.7' },
    },
  },
}

玻璃拟态

基础玻璃效果
<div class="backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl shadow-xl">
  
</div>
玻璃卡片组件
// GlassCard.tsx
interface GlassCardProps {
  children: React.ReactNode;
  blur?: 'sm' | 'md' | 'lg' | 'xl';
  className?: string;
}

export function GlassCard({ children, blur = 'md', className = '' }: GlassCardProps) {
  const blurClasses = {
    sm: 'backdrop-blur-sm',
    md: 'backdrop-blur-md',
    lg: 'backdrop-blur-lg',
    xl: 'backdrop-blur-xl',
  };

  return (
    <div
      className={`
        ${blurClasses[blur]}
        bg-white/10
        dark:bg-gray-900/20
        border border-white/20
        dark:border-gray-700/30
        rounded-2xl
        shadow-xl
        ${className}
      `}
    >
      {children}
    </div>
  );
}
带渐变边框的玻璃效果
<div class="relative p-[1px] rounded-2xl bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500">
  <div class="backdrop-blur-xl bg-black/80 rounded-2xl p-6">
    
  </div>
</div>

渐变边框

使用伪元素创建渐变边框
<div class="relative p-[2px] rounded-lg bg-gradient-to-r from-pink-500 to-violet-500">
  <div class="bg-white dark:bg-gray-900 rounded-lg p-4">
    Content with gradient border
  </div>
</div>
动画渐变边框
<div class="relative p-[2px] rounded-lg overflow-hidden">
  <div class="absolute inset-0 animate-spin-slow bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500"></div>
  <div class="relative bg-white dark:bg-gray-900 rounded-lg p-4">
    Animated border content
  </div>
</div>

// tailwind.config.js
{
  animation: {
    'spin-slow': 'spin 3s linear infinite',
  },
}

渐变叠加层

图像叠加层
<div class="relative">
  <img src="/hero.jpg" alt="Hero" class="w-full h-96 object-cover" />
  <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
  <div class="absolute bottom-0 left-0 p-8 text-white">
    <h1>Title</h1>
  </div>
</div>
边缘淡出效果

<div class="relative">
  <div class="overflow-x-scroll">
    
  </div>
  <div class="absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-white to-transparent pointer-events-none"></div>
  <div class="absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-white to-transparent pointer-events-none"></div>
</div>

深色模式渐变


<div class="bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900"></div>


<div class="
  bg-gradient-to-br from-slate-100 to-slate-200
  dark:bg-slate-950
  dark:bg-[radial-gradient(ellipse_at_top_right,_hsla(240,100%,70%,0.15)_0%,transparent_50%)]
"></div>

性能提示

  1. 限制动画复杂度：谨慎使用 will-change
  2. 优先使用 CSS，而非 JS：CSS 渐变由 GPU 加速
  3. 减少渐变色标：颜色越少，性能越好
  4. 使用透明度，而非复杂渐变：更简单的混合渲染速度更快
  5. 在移动设备上测试：网格渐变可能会对移动设备造成较大负担

<div class="animate-gradient-x will-change-[background-position] ..."></div>

最佳实践

  1. 保持对比度：确保渐变上的文本清晰可读
  2. 保持调色板一致：使用设计系统中的颜色
  3. 动画保持微妙：避免令人分心的动效
  4. 提供备用颜色：提供纯色备用方案
  5. 在深色模式下测试：渐变应在两种主题下都能正常显示
  6. 无障碍性：检查叠加文本的对比度

输出检查清单

每个渐变实现都应包含：

  • 根据使用场景选择合适的渐变类型
  • 使用设计系统调色板中的颜色
  • 适用时添加深色模式变体
  • 在 tailwind.config.js 中添加动画配置
  • 优化动画渐变的性能
  • 为旧版浏览器提供备用方案
  • 验证文本对比度
  • 在移动设备上测试

评论

支持 Markdown