2色 CSS線形グラデーション生成
ローカル処理開始色と終了色、角度を指定して、Webサイト用のCSS線形グラデーションコードを即座に作成します。
使い方と処理基準
開始色と終了色、角度を指定して、Webサイト用のCSS線形グラデーションコードを即座に作成します。
ツールの処理はブラウザ内で行われます。計算・変換の共有リンクを作成すると値がURLに含まれます。アカウント・アクセス解析・広告の情報はプライバシーポリシーをご確認ください。
処理制限
- 最大入力文字数: 100,000文字
「作業」で2色、線形（複数色）、円形（複数色）を選ぶと、そのまま貼れるbackground宣言を作ります。複数色は「色 位置%」を1行に1つずつ書きます。
できること
- 2色
- 開始色・終了色と角度で線形グラデーションを作ります。
- 線形（複数色）
- 複数の色の停止点と角度を使います。
- 円形（複数色）
- circle・ellipseの形のradial-gradientを作ります。
2色 CSS線形グラデーション生成の使い方
- 1作業を選ぶ2色・線形・円形から選びます。
- 2色を入力色を選ぶか「#3366cc 0%」のように行ごとに書きます。
- 3CSSをコピー作られたbackground宣言をコピーします。
活用例
2色、90度
入力: #3366cc → #cc3366、90°
結果: background: linear-gradient(90deg, #3366cc 0%, #cc3366 100%);
円形
入力: #ffffff 0%
#3366cc 100%、circle
結果: background: radial-gradient(circle, #ffffff 0%, #3366cc 100%);
主な利用シーン
- ボタンやバナーの背景グラデーションを作るとき
- デザインカンプのグラデーションをCSSにするとき
よくある質問 (FAQ)
角度0度はどの方向ですか？
CSSでは0degが下から上、90degが左から右、180degが上から下に流れます。