グラデーション
linear-gradientradial-gradientconic-gradient
CSSのグラデーション関数で美しい背景・テキスト効果・パターンを作成できます。画像を使わずにリッチな表現が可能です。
デモ：linear-gradient（線形グラデーション）
to right
to bottom
135deg（斜め）
3色グラデーション
シャープな境界
透明→黒（オーバーレイ）
デモ：radial-gradient（放射状グラデーション）
circle（円形）
ellipse（楕円）
at top left（位置指定）
シャープ（ポルカドット背景用）
デモ：conic-gradient（円錐グラデーション）
カラーホイール
（border-radius: 50%）
円グラフ（3等分）
from 45deg（開始角度）
チェッカーボード
デモ：repeating-gradient（繰り返しグラデーション）
ストライプ（45deg）
垂直ストライプ
同心円リング
デモ：アニメーションするグラデーション
アニメーティンググラデーション
コード例
/* 線形グラデーション */
.linear {
background: linear-gradient(135deg, #667eea, #764ba2);
background: linear-gradient(to right, #f00 0%, #0f0 50%, #00f 100%);
}
/* 放射状グラデーション */
.radial {
background: radial-gradient(circle at center, #667eea, #764ba2);
background: radial-gradient(ellipse 200px 100px at top left, #f00, transparent);
}
/* 円錐グラデーション（カラーホイール / 円グラフ） */
.conic {
background: conic-gradient(red, yellow, green, blue, red);
border-radius: 50%;
}
/* 円グラフの例 */
.pie-chart {
background: conic-gradient(
#667eea 0deg 126deg, /* 35% */
#f093fb 126deg 234deg, /* 30% */
#fbbf24 234deg 360deg /* 35% */
);
border-radius: 50%;
}
/* ストライプパターン */
.stripes {
background: repeating-linear-gradient(
45deg,
#6366f1,
#6366f1 10px,
transparent 10px,
transparent 20px
);
}
/* oklchカラー空間での補間（2023年〜） */
.oklch-gradient {
background: linear-gradient(in oklch, hsl(0 100% 50%), hsl(120 100% 50%));
}比較：linear vs radial vs conic
| 種類 | linear-gradient | radial-gradient | conic-gradient |
|---|---|---|---|
| 方向 | 直線（角度指定） | 中心から外側へ | 角度（回転） |
| 主な用途 | 背景・ボタン・オーバーレイ | スポットライト・ポルカドット | 円グラフ・カラーホイール |
| 繰り返し版 | repeating-linear-gradient | repeating-radial-gradient | repeating-conic-gradient |
| ブラウザ対応 | ✅ 全主要ブラウザ | ✅ 全主要ブラウザ | ✅ Chrome 69+, Safari 12.1+, Firefox 83+ |
NEWconic-gradient と oklchカラー補間（2020〜2023年〜）
conic-gradient は2020-2021年に広くサポートされた比較的新しい関数です。 また、2023年からはグラデーションのカラー補間に oklch などの 知覚均等なカラー空間を使えるようになり、より自然なグラデーションが作れます。
通常（sRGBカラー空間）— 中間に灰色が出る
oklch補間 — 鮮やかさを維持
/* oklchカラー空間での補間（Chrome 111+） */
.vivid-gradient {
background: linear-gradient(in oklch, red, green);
}
/* color-mix()と組み合わせ */
.mixed {
background: linear-gradient(
to right,
color-mix(in oklch, blue 100%, red 0%),
color-mix(in oklch, blue 0%, red 100%)
);
}
/* conic-gradientで円グラフ */
.donut {
background: conic-gradient(
var(--color-accent) 0% 60%,
#e2e8f0 60% 100%
);
border-radius: 50%;
mask: radial-gradient(circle, transparent 60%, black 60%);
}🤖 AIプロンプトテンプレート
CSSのグラデーション関数を使った実装例をReact + Tailwind CSSで作成してください。 要件: - linear-gradient / radial-gradient / conic-gradient の違いを視覚的に比較できるデモ - 角度・位置・色数をインタラクティブに変更できるグラデーションビルダーUI - repeating-linear-gradient / repeating-radial-gradient でのパターン作成デモ - アニメーションするグラデーション背景（background-positionを動かす）の実装 - テキストへのグラデーション適用（background-clip: text）のデモ - oklchカラー空間での補間による鮮やかなグラデーションのサンプル
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。