CSSグラデーション生成器
2〜3色のグラデーション(線形・円形・円錐形)のCSSを作ります。プレビューを見ながら、調整できます。
°
%
プレビュー
CSS(コピー用)
—
計算式
- linear-gradient(角度, 色 位置, 色 位置, …)
- radial-gradient(circle, …)、conic-gradient(from 角度, …)
使い方のヒント
色は、HEX・rgb()・色名など、CSSで使える書き方が使えます。グラデーションの上に、文字を置くときは、コントラスト計算機で、いちばん条件の悪い部分の色との比を、確認してください。
関連ツール
よくある質問
CSSグラデーション生成器では何がわかりますか？
2〜3色のグラデーション(線形・円形・円錐形)のCSSを作ります。プレビューを見ながら、調整できます。
何を入力すればいいですか？
次の項目を入力します: 種類、角度(線形・円錐形)、開始の色、途中の色(なしなら空欄)、途中の色の位置、終了の色。内容を変えると、結果もそれに合わせて変わります。
結果にはどんな項目が表示されますか？
「CSS(コピー用)」などが表示されます。
どんな計算式を使っていますか？
ページ内の「計算式」にまとめています。たとえば「linear-gradient(角度, 色 位置, 色 位置, …)」のような式です。
入力した値は外部に送信されますか？
いいえ。処理はお使いのブラウザの中だけで行い、サーバーには送信しません。
結果はどのくらい正確ですか？
色の見え方はモニターや印刷で変わります。サイズや比率は計算どおりですが、仕上がりは実際に書き出して確認してください。
結果をコピーできますか？
はい。「結果をコピー」ボタンで、表示されている結果をクリップボードにコピーできます。
スマホでも使えますか？
はい。画面の幅に合わせて表示されます。アプリのインストールや会員登録は必要ありません。
同じカテゴリ(色・配色・グラデーション)の他のツールはありますか？
はい。HEX/RGB/HSL変換機、カラーパレット抽出、カラーピッカー、HEX→RGB→HSL変換機などがあります。