ランダムグラデーション生成ツール
2色・3色のCSS線形グラデーションをランダム生成。HEXカラーや角度を編集し、プレビューを確認してCSSをコピー・ダウンロードできます。
関連ツール： Webサイト配色プレビュー , 読みやすい文字色ジェネレーター , ランダム5色パレット生成 など
0°〜360°の整数を指定してください。0°は上方向、90°は右方向です。
角度を維持したまま新しい色を生成します。色や角度の変更はプレビューとCSSにすぐ反映されます。
グラデーションのプレビュー
背景のCSSコード
.gradient {
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
}ランダムなCSSグラデーションの作り方
- 2色または3色を選び、0°〜360°の角度を設定します。
- 色をランダム生成するか、カラーピッカーまたは3桁・6桁のHEXカラーで指定します。
- 背景をプレビューしてCSSをコピーするか、random-gradient.cssをダウンロードします。HTML要素にgradientクラスを指定してください。
Webサイトの背景に使うアイデア
- 青と紫の2色グラデーションをランディングページのメインビジュアルに使用。
- 3色グラデーションをプレゼン用カード、ダッシュボードのヘッダー、ポートフォリオのセクションに活用。
- ブランドカラーを保ちながら角度を変え、背景の見え方を比較。
よくある質問
ランダム生成した後も編集できますか？
はい。入力欄やカラーピッカーで各HEXカラーを変更し、角度も調整できます。プレビューとCSSには同じ設定が反映されます。
対応する色形式とグラデーションは？
不透明なCSS線形グラデーションに対応し、2色または3色を等間隔に配置します。色は3桁・6桁のHEX形式を指定できます。透明度、放射状グラデーション、色の位置指定には対応していません。
無効な色や角度を入力するとどうなりますか？
エラーが表示され、以前のプレビューとCSSは消去されます。有効な設定に修正するまでコピーとダウンロードは無効になります。
自分のWebサイトで使えますか？
はい。.gradientルールをスタイルシートにコピーし、対象の要素にclass="gradient"を追加してください。ダウンロードするファイルにも画面と同じルールが含まれます。
色の生成と編集はブラウザー内で行われます。入力したHEXカラーや生成したCSSをサーバーに送信することはありません。通常のサイト広告やアクセス解析は読み込まれる場合があります。
このツールは便利でしたか？チームと共有して、作業をよりスムーズにしましょう。
役に立った場合は を、改善が必要な場合は を押してください。優先的に対応します。
Ctrl+D を押してこのツールをブックマークに保存できます。