CSSグラデーションジェネレーター
linear・radialグラデーションをビジュアルで作成してCSSコードをコピー
カラーストップ
CSS出力
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);CSSグラデーションとは？
CSSグラデーションジェネレーターは、グラデーション構文を手書きせずに滑らかな色の遷移を構築できるビジュアルツールです。CSSにおけるグラデーションとは、2色以上の間でブラウザが直接描画する滑らかな色の遷移であり、画像ファイルを必要としません。CSS Image Module Level 4仕様では、グラデーション関数を画像値の一種として定義しています。つまり、background-image、list-style-image、border-imageが使用できる場所ならどこでも利用可能です。ブラウザはレンダリング時にグラデーションをラスタライズするため、任意の解像度に拡大縮小でき、高DPI画面でもぼやけたアーティファクトが生じません。CSSグラデーションジェネレーターを使えば、色や位置をビジュアルで調整して完成したCSSルールをコピーするだけなので、時間を節約し試行錯誤を減らせます。
CSSは主に3種類のグラデーション形状をサポートしています。linear（直線に沿った遷移）、radial（中心点から外側への遷移）、conic（中心点を軸に回転する遷移）です。各形状はカラーストップのリストを受け取り、色と任意の位置（パーセンテージまたは長さ）を指定します。ブラウザはデフォルトでsRGB色空間を使って各ストップ間の色を補間しますが、CSS Color Level 4ではoklchやlabなど他の色空間を指定して知覚的に滑らかな遷移を実現することも可能です。
グラデーションはウェブ上のほとんどの装飾的用途において、画像ベースの背景を置き換えています。かつてPhotoshopのエクスポートとHTTPリクエストが必要だったものが、1つのCSSルールで実現できます。解像度に依存せず、CSS自体以外のネットワーク帯域幅を必要とせず、標準のCSSプロパティでアニメーションやトランジションも適用できます。グラデーション構文は2013年以降すべての主要ブラウザで安定しており、ベンダープレフィックスなしでChrome、Firefox、Safari、Edgeで動作します。
このCSSグラデーションジェネレーターを使う理由
グラデーション構文を手書きするには、ストップ位置を推測し、角度の値を確認し、何度もリフレッシュして結果を確認する必要があります。ビジュアルビルダーなら作成しながらグラデーションを確認でき、ドラッグでストップを調整し、見た目が整ったら最終的なCSSをコピーできます。
CSSグラデーションジェネレーターの活用例
CSSグラデーション種類リファレンス
CSSは5つのグラデーション関数を定義しています。3つの主要な種類（linear、radial、conic）にはそれぞれパターンを繰り返すrepeatingバリアントがあります。repeating-linear-gradient()とrepeating-radial-gradient()はストライプ背景や同心円のリングに有用です。すべてのグラデーション関数は、HEX、RGB、HSL、名前付き色、oklchなど任意のCSS色形式のカラーストップを受け付けます。5つの関数すべてのブラウザサポートはChrome、Firefox、Safari、Edgeで実質的に網羅されており、ベンダープレフィックスは不要です。
| 関数 | 記述例 | 方向 | 主な用途 |
|---|---|---|---|
| linear-gradient() | to right, #f00, #00f | Straight line | Backgrounds, hero sections, progress bars |
| radial-gradient() | circle, #f00, #00f | Outward from center | Spotlight effects, buttons, badges |
| conic-gradient() | from 0deg, #f00, #00f | Sweep around center | Pie charts, color wheels, spinners |
| repeating-linear | to right, #f00 0 10px, #00f 10px 20px | Tiled line | Stripes, progress indicators, decorative borders |
| repeating-radial | circle, #f00 0 10px, #00f 10px 20px | Tiled circle | Concentric ring patterns, retro textures |
Linear・Radial・Conicグラデーションの比較
グラデーションの種類ごとに、色と形状のマッピング方法が異なります。適切な種類の選択は、品質の違いではなく必要なビジュアル効果によって決まります。ほとんどのページ背景やセクション区切りにはlinearグラデーションが適切なデフォルトです。最もシンプルで、さまざまなサイズの要素でも予測可能な結果が得られます。RadialとConicは、円形または回転の形状が意味を持つ特定のビジュアル効果にのみ使用するのが効果的です。
コード例
JavaScript、Python、CSS、GoでCSSグラデーションをプログラムで生成・適用する例です。いずれもスタイルシートやインラインスタイルで直接使用できる有効なCSSグラデーション文字列を生成します。
// Generate a CSS linear-gradient string from an array of stops
function buildGradient(angle, stops) {
const parts = stops.map(s => `${s.color} ${s.position}%`)
return `linear-gradient(${angle}deg, ${parts.join(', ')})`
}
const stops = [
{ color: '#6366f1', position: 0 },
{ color: '#ec4899', position: 50 },
{ color: '#f59e0b', position: 100 },
]
buildGradient(90, stops)
// -> "linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"
// Apply to an element
document.querySelector('.hero').style.background = buildGradient(135, stops)# Generate a CSS gradient string for use in templates or SVGs
def build_gradient(angle: int, stops: list[tuple[str, int]]) -> str:
parts = [f"{color} {pos}%" for color, pos in stops]
return f"linear-gradient({angle}deg, {', '.join(parts)})"
stops = [("#6366f1", 0), ("#ec4899", 50), ("#f59e0b", 100)]
print(build_gradient(135, stops))
# -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"
# Interpolate N colors between two endpoints
def interpolate_hex(c1: str, c2: str, steps: int) -> list[str]:
r1, g1, b1 = int(c1[1:3], 16), int(c1[3:5], 16), int(c1[5:7], 16)
r2, g2, b2 = int(c2[1:3], 16), int(c2[3:5], 16), int(c2[5:7], 16)
return [
f"#{int(r1+(r2-r1)*i/(steps-1)):02x}"
f"{int(g1+(g2-g1)*i/(steps-1)):02x}"
f"{int(b1+(b2-b1)*i/(steps-1)):02x}"
for i in range(steps)
]
interpolate_hex("#6366f1", "#f59e0b", 4)
# -> ['#6366f1', '#9a7399', '#d18042', '#f59e0b']/* Linear gradient — left to right */
.hero {
background: linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);
}
/* Radial gradient — circular spotlight */
.badge {
background: radial-gradient(circle at 30% 30%, #6366f1, #312e81);
}
/* Conic gradient — color wheel */
.wheel {
background: conic-gradient(from 0deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6, #ef4444);
border-radius: 50%;
}
/* Multi-stop with transparency */
.overlay {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.6) 60%,
rgba(0, 0, 0, 0.9) 100%
);
}
/* Repeating stripes */
.stripes {
background: repeating-linear-gradient(
45deg,
#6366f1 0 10px,
transparent 10px 20px
);
}package main
import "fmt"
// Stop represents one color stop in a gradient.
type Stop struct {
Color string
Position int // percent 0-100
}
func buildGradient(angle int, stops []Stop) string {
result := fmt.Sprintf("linear-gradient(%ddeg", angle)
for _, s := range stops {
result += fmt.Sprintf(", %s %d%%", s.Color, s.Position)
}
return result + ")"
}
func main() {
stops := []Stop{
{"#6366f1", 0},
{"#ec4899", 50},
{"#f59e0b", 100},
}
fmt.Println(buildGradient(135, stops))
// -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"
}