線形グラデーションの背景を作成
角度とカラーストップを調整し、ページ背景やバナー用のlinear-gradient CSSを作れます。
線形・放射CSSグラデーション生成
線形・放射CSSグラデーション生成
線形・放射グラデーションの方向、形、カラーストップ、位置を視覚的に編集し、background CSSをコピーします。
主な機能
- 0〜360度の線形グラデーション、または円形・楕円形の放射グラデーションを作成します。
- 0〜100%の位置にHEXまたはアルファ付きHEXのカラーストップを追加します。
- 2つ以上のストップを維持し、CSS出力では位置順に並べます。
- ストップの色をランダム化するか、エディターを初期状態へ戻せます。
- ライブプレビューと完成したbackground宣言を表示します。
使い方
- 線形または放射を選び、角度または放射形状を設定します。
- 各ストップのHEX色と位置を編集し、必要なら追加します。
- プレビューを確認し、background CSSをコピーします。
活用例
放射状の色効果を比較
円形・楕円形の放射状グラデーションを切り替え、色をランダム化して案を素早く比較できます。
プライバシー
グラデーション設定、ランダム色、CSS生成はブラウザ内で処理されます。
動作要件
入力色は3桁、6桁、8桁のHEXに限られます。対象とするすべてのブラウザで8桁アルファHEXに対応しているか確認してください。
よくある質問
- カラーストップを追加して位置を変えられますか？
- はい。最低2つを残して追加・削除し、各位置を0〜100%で指定できます。
- どのようなCSSが生成されますか？
- 選択した種類に応じてlinear-gradientまたはradial-gradientを含むbackground宣言を生成し、コピーできます。
関連ツール
- カラーピッカー | 画像・画面から色を取得HEX、RGB、HSLを相互変換し、アップロード・貼り付け画像のピクセルや対応ブラウザの画面から色を取得します。
- WCAGカラーコントラスト確認前景色と背景色のHEXからWCAG 2.xのコントラスト比を計算し、通常・大きな文字のAA・AAA適合を確認します。
- CSSボックスシャドウ生成オフセット、ぼかし、広がり、色、不透明度、内側シャドウを視覚的に調整し、重ねたCSS box-shadowを作成します。
- CSS cubic-bezierイージング生成2つの制御点をドラッグしてCSSアニメーションやトランジションのcubic-bezier曲線を作り、動きをプレビューします。