開発者ツール
CSSグラデーションジェネレーター - linear / radial コード生成
色と角度を調整して線形・放射状グラデーションを作成し、CSSコードをすぐにコピーできます。
グラデーションを手書きするのは大変
CSSグラデーションはカラーストップや角度を数値で計算する必要があり、納得のいく結果になるまで何度も修正しなければなりません。このツールは色、角度、種類を視覚的に調整してグラデーションを作成し、対応するCSSコードをワンクリックでコピーできます。
ヒーロー領域、ボタン、背景にグラデーションを置くと画面が大きく生き生きと変わります。生成されたコードを貼り付けるだけです。
こんな方に特に役立ちます
- ウェブデザイナー・パブリッシャー — ボタンや背景にグラデーションを置く時
- フロントエンド開発者 — CSSコードを素早く作る時
- コーディングを学ぶ方 — グラデーションプロパティを理解する時
よくある質問
基本的に開始色と終了色の2つを提供します。生成されたコードのカラーストップを直接増やして3色以上に拡張できます。
放射状グラデーションは中心から外側に広がる形なので、角度設定は意味がありません。種類を放射状に切り替えると、角度スライダーは自動的に非表示になります。
生成されるlinear-gradientとradial-gradientは、モダンブラウザでベンダープレフィックスなしで動作します。古いブラウザのサポートが必要な場合は別途プレフィックスを追加してください。
Share this page