グラデーションジェネレーター
ドラッグ可能な多色ストップとキュレーション済みプリセットで、線形・放射状・円錐形の CSS グラデーションをゼロから作成。すぐに使える CSS をコピーできます。
ライブプレビュー
プリセット
グラデーションタイプ
角度
°
カラーストップ
ハンドルをドラッグしてストップを移動するか、バーをクリックして追加します。ストップを選択して色を編集できます。
選択中のストップ
%
CSS
background: —;
すべてブラウザでリアルタイムに計算されます — サインアップなし、完全無料。
グラデーションジェネレーターについて
グラデーションジェネレーターは、カスタムCSSグラデーションをゼロから構築します。線形、放射状、円錐形のいずれかを選び、角度を設定し、マルチストップエディターでブレンドを形作ります。ハンドルをドラッグしてストップを移動し、バーをクリックして新しいストップを追加し、ピッカーで任意のストップを再着色できます。ライブプレビューは作業中も更新され続けます。
ゼロから始めたくないときのために、厳選されたプリセットが強力な出発点を提供し、ランダム、反転、45°回転といったワンクリックのアクションが素早い試行錯誤を可能にします。生成されたCSSは常に表示され、プレビューと同期しているため、コピーする内容は見たままの結果です。
すべての計算はブラウザ内でリアルタイムに、無料で行われます。CSSルール全体または背景の値だけをコピーして、スタイルシート、ボタンのスタイル、ヒーローセクションに貼り付けられます。背景、オーバーレイ、UIアクセント向けの、シンプルなCSSグラデーションジェネレーターです。
グラデーションジェネレーターの使い方
- グラデーションの種類を選びます――線形、放射状、円錐形。
- プリセットから始めるか、「ランダム」をクリックして即座に出発点を得ます。
- ストップのハンドルをドラッグして色を配置し、バーをクリックしてストップを追加し、各ストップの色を編集します。
- 角度を調整するか、「反転」や「45°回転」を使ってブレンドの向きを変えます。
- CSSルールまたは背景の値をコピーして、プロジェクトに貼り付けます。
よくある質問
はい。ツールは完全にクライアント側で動作します。登録もクレジットも、作成またはコピーするグラデーションの数の制限もありません。
線形グラデーションは、選んだ角度に沿って直線的に色をブレンドします。放射状グラデーションは、中心点から円形に外側へ広がります。円錐形グラデーションは、パイチャートのように中心点の周りを色が回転します。カラーホイールやプログレスリングに最適です。
グラデーションには少なくとも2つのストップが必要で、バーをクリックし続けることでさらに追加できます。各ストップは独自の色とドラッグ可能な位置を持つため、複雑なマルチカラーのブレンドも簡単に作成できます。
線形と放射状のグラデーションはどこでもサポートされています。円錐形グラデーションは最新のブラウザではすべてサポートされていますが、非常に古いブラウザではサポートされていないため、レガシーバージョンをサポートする必要がある場合はフォールバックの背景色を用意してください。
はい――付随ツールである「画像からグラデーションを生成」を使ってください。アップロードした画像の支配的な色を抽出し、編集可能なグラデーションストップに変換します。このツールはゼロから作る方の対になるものです。
人気の検索
グラデーション生成
cssグラデーション作成
linear gradient生成
radial gradient作成
conic gradient css
無料グラデーション生成
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。