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. 最適化：パフォーマンスとアクセシビリティを確保します

基本的な線形グラデーション

2 色のシンプルなグラデーション

<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右下から左上
3 色のグラデーション

<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. JS より CSS を優先する：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 対応