このツールに問題がありますか?
「CSS グラデーション ジェネレーター オンライン」について
このツールは CSS の linear/radial/conic グラデーションを視覚的に作成します。カラーストップを追加し、方向や角度、透明度を設定すると、対応する CSS コードを生成してスタイルシートに貼り付けられます。
現代の Web デザインでグラデーションは至るところに:ヒーロー背景、ボタンの状態、カードのアクセント、グラデーションテキストなど。CSS のグラデーション構文を手書きするのは面倒ですが、視覚編集なら試行錯誤せず滑らかな遷移を試せます。
複数のストップ、パーセント指定、色空間ごとの補間、円形効果のための conic などにも対応。CSS としても Tailwind ユーティリティクラスとしてもコピー可能。
このツールの使い方
2 色のみの linear-gradient CSS を組み立てる手順
2 つの停止色
「Color 1」「Color 2」は CSS の任意の色:hex(`#1e3a8a`)、rgb(`rgb(30 58 138)`)、α付き rgba、名前色(`navy`)。最初の停止は 0%、2 つ目は 100%。
角度を設定
「Angle (deg)」で方向を度数指定。`0` は下→上、`90` は左→右、`180` は上→下(CSS の既定)、`45` はクラシックな斜め。
「実行」
結果は `css` のみ:`linear-gradient(<angle>deg, <color1>, <color2>)`。`background:` または `background-image:` の値としてそのまま貼り付け可能。
2 ストップを超える場合
radial、conic、3 つ以上のストップが必要なら出力を手で編集してください — 構文は `linear-gradient(45deg, #fff 0%, #000 50%, #f00 100%)`。あるいはもっとリッチなグラデーションエディタへ。このツールは 2 色のリニア専用で意図的に最小限です。