CSSグラディエント生成器 - リニア＆ラジアルグラデーション オンライン
CSSグラデーションをライブプレビュー付きで作成。リニア・ラジアルグラデーションのCSSコードコピーまたはTailwindクラスでエクスポート。
よくある質問
CSSグラデーションとは何ですか?
CSSグラデーションは、画像ファイルを必要とせず、純粋にCSSコードで作成された2つ以上の色間の滑らかな遷移です。グラデーションはリニア(直線方向)、ラジアル(中心点から放射状)、またはコニック(中心点の周り)にすることができます。軽量でスケーラブルで、背景、ボタン、UI要素に最適です。
リニアグラデーションとラジアルグラデーションの違いは何ですか?
リニアグラデーションは、指定された角度(例:左から右、上から下、または斜め)に沿って直線上で色が遷移します。ラジアルグラデーションは、中心点から外側に向かって色が遷移し、円形または楕円形のパターンを作成します。方向性のある効果にはリニアグラデーションを、スポットライトやグロー効果にはラジアルグラデーションを使用してください。
このグラデーションジェネレーターの使い方を教えてください
グラデーションタイプ(リニアまたはラジアル)を選択し、カラーピッカーをクリックしてカラーストップを追加または調整し、ビジュアルピッカーまたは入力フィールドを使用して方向/角度を設定し、リアルタイムでグラデーションをプレビューし、コピーボタンを使用してCSSコードまたはTailwindクラスをコピーします。
Tailwind CSS出力とは何ですか?いつ使用すべきですか?
Tailwind CSSは、モダンなWeb開発で人気のあるユーティリティファーストのCSSフレームワークです。プロジェクトでTailwindを使用している場合、生成されたクラス(bg-gradient-to-r from-blue-500 to-purple-500など)をHTMLに直接コピーできます。注意:Tailwindは2〜3個のカラーストップを持つリニアグラデーションのみをサポートしています。
カラーストップはいくつまで追加できますか?
1つのグラデーションに最大10個のカラーストップを追加できます。各ストップは独自の色と位置(0〜100%)を持つことができます。グラデーションを表示するには、最低2つのカラーストップが必要です。グラデーションバーのマーカーをドラッグして位置を調整してください。
このグラデーションジェネレーターは安全でプライバシーは保護されますか?
はい。このツールはクライアントサイドのJavaScriptを使用して100%ブラウザ内で実行されます。グラデーションデータがサーバーに送信されることはありません。すべての生成とコード出力はデバイス上でローカルに行われるため、独自のブランドカラーや機密性の高いデザイン作業にも安全です。
コード例
// Create CSS gradients programmatically
function createLinearGradient(angle, colorStops) {
const stops = colorStops
.map(stop => `${stop.color} ${stop.position}%`)
.join(', ');
return `linear-gradient(${angle}deg, ${stops})`;
}
function createRadialGradient(shape, position, colorStops) {
const stops = colorStops
.map(stop => `${stop.color} ${stop.position}%`)
.join(', ');
return `radial-gradient(${shape} at ${position.x}% ${position.y}%, ${stops})`;
}
// Usage
const linear = createLinearGradient(135, [
{ color: '#667eea', position: 0 },
{ color: '#764ba2', position: 100 }
]);
console.log(linear);
// linear-gradient(135deg, #667eea 0%, #764ba2 100%)
document.body.style.background = linear;