設定
線形 135°、#667eea → #764ba2
CSS
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
デザインツール
CSS グラデーションジェネレーター - Linear、Radial、Conic
linear、radial、conic の CSS グラデーションを視覚的に作成できます。角度や stop 位置を調整し、複数 stop を追加して、背景、ボタン、ブランド遷移向けの CSS をコピーできます。
CSSグラデーション背景
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
设计配色
CSS グラデーションジェネレーター
135°
%
%
利用シーン
- ページやカード背景のグラデーションを設計する
- 2 色または多段 stop の UI 遷移を調整する
- そのまま貼り付けられる gradient CSS を出力する
使い方
- linear、radial、conic から種類を選ぶ
- 角度、stop の色と位置を設定し、必要なら stop を追加する
- 生成された gradient CSS をコピーする
入出力サンプル
FAQ
どのグラデーション種類に対応していますか？
linear-gradient、radial-gradient、conic-gradient に対応しています。
stop は複数追加できますか？
はい。Add stop を使って追加し、それぞれの stop に色と 0〜100 の位置を設定できます。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
CSS Box Shadow ジェネレーター
CSS Box Shadow ジェネレーター - 視覚的コントロール付き
offset、blur、spread、color、opacity、inset を視覚的に調整し、カード、ボタン、オーバーレイ向けの box-shadow CSS をライブ生成できます。
CSS 影 box-shadow
カラーフォーマット変換
カラーフォーマット変換 - HEX、RGB、HSL オンライン
HEX、RGB、HSL、HWB、CMYK、CSS 変数のあいだで色をブラウザ内変換できます。カラーピッカーとランダムカラー補助も備え、デザインの引き継ぎ、スタイルシート作業、ブランドカラー整合に役立ちます。
カラー HEX RGB
パレットジェネレーター
パレットジェネレーター - ルールベースの配色セット
モノクローム、類似色、補色、トライアド、完全ランダムなどのルールで配色を生成できます。個別 swatch をロックし、残りだけ再生成して UI 検討やブランド派生色づくりに使えます。
パレット 色 調和