tailwind-gradient-builder

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tailwind Gradient Builder

Tailwind 渐变生成器

Create stunning modern gradients with Tailwind CSS for backgrounds, text, borders, and animations.

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

Core Workflow

核心工作流程

Choose gradient type: Linear, radial, conic, or mesh
Select color palette: Define color stops and positions
Add direction/angle: Configure gradient orientation
Apply effects: Blur, animation, glassmorphism
Optimize: Ensure performance and accessibility

选择渐变类型：线性、径向、锥形或网格
选择调色板：定义颜色节点和位置
添加方向/角度：配置渐变方向
应用效果：模糊、动画、毛玻璃效果
优化：确保性能与可访问性

Basic Linear Gradients

基础线性渐变

Simple Two-Color Gradient

简单双色渐变

html

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

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

<!-- Diagonal -->
<div class="bg-gradient-to-br from-pink-500 to-orange-400"></div>

html

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

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

<!-- Diagonal -->
<div class="bg-gradient-to-br from-pink-500 to-orange-400"></div>

Direction Classes

方向类

Class	Direction
`bg-gradient-to-t`	Bottom to Top
`bg-gradient-to-tr`	Bottom-left to Top-right
`bg-gradient-to-r`	Left to Right
`bg-gradient-to-br`	Top-left to Bottom-right
`bg-gradient-to-b`	Top to Bottom
`bg-gradient-to-bl`	Top-right to Bottom-left
`bg-gradient-to-l`	Right to Left
`bg-gradient-to-tl`	Bottom-right to Top-left

类	方向
`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`	从右下到左上

Three-Color Gradients

三色渐变

html

<!-- With via for middle color -->
<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>

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

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

html

<!-- With via for middle color -->
<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>

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

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

Modern Gradient Presets

现代渐变预设

Aurora Borealis

极光效果

html

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

html

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

Sunset Vibes

日落氛围

html

<div class="bg-gradient-to-r from-amber-200 via-rose-400 to-violet-500"></div>

html

<div class="bg-gradient-to-r from-amber-200 via-rose-400 to-violet-500"></div>

Neon Glow

霓虹发光

html

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

html

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

Forest Mist

森林薄雾

html

<div class="bg-gradient-to-br from-emerald-400 via-teal-500 to-cyan-600"></div>

html

<div class="bg-gradient-to-br from-emerald-400 via-teal-500 to-cyan-600"></div>

Midnight City

午夜都市

html

<div class="bg-gradient-to-b from-gray-900 via-purple-900 to-violet-600"></div>

html

<div class="bg-gradient-to-b from-gray-900 via-purple-900 to-violet-600"></div>

Peach Sunset

蜜桃日落

html

<div class="bg-gradient-to-r from-rose-100 via-pink-300 to-orange-200"></div>

html

<div class="bg-gradient-to-r from-rose-100 via-pink-300 to-orange-200"></div>

Gradient Text

渐变文字

html

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

<!-- Animated gradient text -->
<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>

html

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

<!-- Animated gradient text -->
<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 Config for Animated Gradient Text

渐变文字的Tailwind配置

javascript

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        gradient: 'gradient 3s ease infinite',
      },
      keyframes: {
        gradient: {
          '0%, 100%': { backgroundPosition: '0% 50%' },
          '50%': { backgroundPosition: '100% 50%' },
        },
      },
    },
  },
};

javascript

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        gradient: 'gradient 3s ease infinite',
      },
      keyframes: {
        gradient: {
          '0%, 100%': { backgroundPosition: '0% 50%' },
          '50%': { backgroundPosition: '100% 50%' },
        },
      },
    },
  },
};

Radial Gradients

径向渐变

html

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

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

<!-- Circle gradient -->
<div class="bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-white to-gray-300"></div>

html

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

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

<!-- Circle gradient -->
<div class="bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-white to-gray-300"></div>

Radial Position Variants

径向渐变位置变体

html

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

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

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

html

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

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

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

Conic Gradients

锥形渐变

html

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

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

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

html

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

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

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

Mesh Gradients

网格渐变

CSS Mesh Gradient (Multiple Radials)

CSS网格渐变（多径向渐变）

html

<div class="relative min-h-screen overflow-hidden">
  <!-- Base layer -->
  <div class="absolute inset-0 bg-slate-950"></div>

  <!-- Mesh gradient layers -->
  <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>

html

<div class="relative min-h-screen overflow-hidden">
  <!-- Base layer -->
  <div class="absolute inset-0 bg-slate-950"></div>

  <!-- Mesh gradient layers -->
  <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>

Reusable Mesh Component

可复用网格组件

tsx

// 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>
  );
}

tsx

// 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>
  );
}

Animated Gradients

动画渐变

Flowing Gradient Animation

流动渐变动画

html

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

javascript

// 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',
          },
        },
      },
    },
  },
};

html

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

javascript

// 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',
          },
        },
      },
    },
  },
};

Breathing/Pulsing Gradient

呼吸/脉冲渐变

html

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

javascript

// 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' },
    },
  },
}

html

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

javascript

// 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' },
    },
  },
}

Glassmorphism

毛玻璃效果

Basic Glass Effect

基础毛玻璃效果

html

<div class="backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl shadow-xl">
  <!-- Content -->
</div>

html

<div class="backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl shadow-xl">
  <!-- Content -->
</div>

Glass Card Component

毛玻璃卡片组件

tsx

// 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>
  );
}

tsx

// 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>
  );
}

Glass with Gradient Border

带渐变边框的毛玻璃

html

<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">
    <!-- Content -->
  </div>
</div>

html

<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">
    <!-- Content -->
  </div>
</div>

Gradient Borders

渐变边框

Gradient Border with Pseudo-element

伪元素实现渐变边框

html

<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>

html

<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>

Animated Gradient Border

动画渐变边框

html

<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>

javascript

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

html

<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>

javascript

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

Gradient Overlays

渐变遮罩

Image Overlay

图片遮罩

html

<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>

html

<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>

Fade Edge Effect

边缘淡入淡出效果

html

<!-- Fade to sides -->
<div class="relative">
  <div class="overflow-x-scroll">
    <!-- Scrollable content -->
  </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>

html

<!-- Fade to sides -->
<div class="relative">
  <div class="overflow-x-scroll">
    <!-- Scrollable content -->
  </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>

Dark Mode Gradients

深色模式渐变

html

<!-- Gradient that adapts to dark mode -->
<div class="bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900"></div>

<!-- Mesh gradient for dark mode -->
<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>

html

<!-- Gradient that adapts to dark mode -->
<div class="bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900"></div>

<!-- Mesh gradient for dark mode -->
<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>

Performance Tips

性能优化技巧

Limit animation complexity: Use
```
will-change
```
sparingly
Prefer CSS over JS: CSS gradients are GPU-accelerated
Reduce gradient stops: Fewer colors = better performance
Use opacity over complex gradients: Simpler blends render faster
Test on mobile: Mesh gradients can be heavy on mobile devices

html

<!-- Optimize with will-change for animated gradients -->
<div class="animate-gradient-x will-change-[background-position] ..."></div>

限制动画复杂度：谨慎使用
```
will-change
```
优先使用CSS而非JS：CSS渐变由GPU加速
减少渐变节点：颜色越少，性能越好
使用透明度替代复杂渐变：简单混合渲染更快
在移动端测试：网格渐变在移动设备上可能占用较多资源

html

<!-- Optimize with will-change for animated gradients -->
<div class="animate-gradient-x will-change-[background-position] ..."></div>

Best Practices

最佳实践

Maintain contrast: Ensure text is readable over gradients
Consistent palette: Use colors from your design system
Subtle animations: Avoid distracting motion
Fallback colors: Provide solid color fallback
Test in dark mode: Gradients should work in both themes
Accessibility: Check contrast ratios for overlaid text

保持对比度：确保渐变上的文字可读
统一调色板：使用设计系统中的颜色
微妙的动画：避免分散注意力的动效
备用颜色：提供纯色备用方案
在深色模式下测试：渐变应适配两种主题
可访问性：检查叠加文字的对比度

tailwind-gradient-builder

Original

Translation

Tailwind Gradient Builder

Tailwind 渐变生成器

Core Workflow

核心工作流程

Basic Linear Gradients

基础线性渐变

Simple Two-Color Gradient

简单双色渐变

Direction Classes

方向类

Three-Color Gradients

三色渐变

Modern Gradient Presets

现代渐变预设

Aurora Borealis

极光效果

Sunset Vibes

日落氛围

Neon Glow

霓虹发光

Forest Mist

森林薄雾

Midnight City

午夜都市

Peach Sunset

蜜桃日落

Gradient Text

渐变文字

Tailwind Config for Animated Gradient Text

渐变文字的Tailwind配置

Radial Gradients

径向渐变

Radial Position Variants

径向渐变位置变体

Conic Gradients

锥形渐变

Mesh Gradients

网格渐变

CSS Mesh Gradient (Multiple Radials)

CSS网格渐变（多径向渐变）

Reusable Mesh Component

可复用网格组件

Animated Gradients

动画渐变

Flowing Gradient Animation

流动渐变动画

Breathing/Pulsing Gradient

呼吸/脉冲渐变

Glassmorphism

毛玻璃效果

Basic Glass Effect

基础毛玻璃效果

Glass Card Component

毛玻璃卡片组件

Glass with Gradient Border

带渐变边框的毛玻璃

Gradient Borders

渐变边框

Gradient Border with Pseudo-element

伪元素实现渐变边框

Animated Gradient Border

动画渐变边框

Gradient Overlays

渐变遮罩

Image Overlay

图片遮罩

Fade Edge Effect

边缘淡入淡出效果

Dark Mode Gradients

深色模式渐变

Performance Tips

性能优化技巧

Best Practices

最佳实践

Output Checklist

输出检查清单