colorize
ColorKit
CK

CSSグラデーションジェネレーター

美しいリニアグラデーションを直感的にデザインし、プロジェクト用のCSSコードを即座にコピーできます。

CSS Output

background: linear-gradient(90deg, #4F46E5 0%, #EC4899 100%);

Preview

CSSグラデーションの仕組み

グラデーションは2色以上の間の滑らかな変化を表現します。CSSでは単なる塗りつぶし色ではなく background-image として扱われるため、複数のレイヤーを自在に重ね合わせることが可能です。

線形グラデーション（Linear Gradient）

角度（度数）または方向キーワードを指定し、カラーストップを順に記述します。上のツールで角度スライダーを動かすことで、リアルタイムに変化を確認できます。

ナレッジベース & FAQ

よくある質問 (FAQ)

よくある疑問、技術的課題、業界標準に対する分かりやすい解説と解決策。

CSSグラデーションの中央が灰色っぽく濁って見える（くすむ）原因は？expand_more
これはCG分野で「グレーのデッドゾーン」と呼ばれる現象です。sRGB色空間で青と黄色などの反対色を補間すると、数学的な中間値が彩度の低い灰色を通ってしまうためです。解決策：
  • 中間に調和する中間色（緑など）のカラーストップを追加する。
  • モダンCSS Color 4のOKLCH補間構文を使用する：background: linear-gradient(in oklch to right, blue, yellow);（知覚輝度が維持され鮮やかに補間されます）。
CSSでホバー時にグラデーションを滑らかにアニメーションさせるには？expand_more
ブラウザはbackground-imageプロパティを直接トランジションできません。しかし、背景サイズを広げてbackground-positionをアニメーションさせることで、滑らかな60fpsのホバーエフェクトを実現できます： 
.gradient-btn {
  background: linear-gradient(135deg, #4F46E5, #EC4899);
  background-size: 200% 200%;
  transition: background-position 0.4s ease;
}
.gradient-btn:hover {
  background-position: 100% 100%;
}
linear-gradient（線形）とradial-gradient（放射状）の違いは何ですか？expand_more
linear-gradient()は指定した角度（90degなど）や方向（to bottom right）に沿って直線的に色を変化させます。radial-gradient()は中心点から外側に向かって同心円または楕円状に広がるため、スポットライトや柔らかな発光効果に最適です。
CSSグラデーションで流行のグラスモフィズム（すりガラス効果）を作るには？expand_more
半透明のRGBAグラデーションとGPUアクセラレーションによるブラーを組み合わせます： 
.glass-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
}
複雑なCSSグラデーションはスマホの描画負荷やバッテリーに影響しますか？expand_more
いいえ。ビットマップ画像（PNG/WebP）と異なり、CSSグラデーションはGPUシェーダーで直接計算されるベクター数式です。ネットワーク通信量がゼロで、メモリ消費もごくわずかです。