lockファイルはサーバーに送信されません
CSSグラデーションを生成する無料オンラインツールです。 リニア、ラジアル、コニカルグラデーションを視覚的にデザインしCSSコードを即座にコピーできます。 ブラウザ内で処理されサーバー通信がありません。 Webデザインに最適です。
グラデーション生成の使い方は?
- グラデーションタイプを選択します。
- カラーストップを追加し色を設定します。
- 生成されたCSSコードをコピーします。
グラデーション生成に関するよくある質問
どのグラデーションタイプに対応?
リニア、ラジアル、コニカルグラデーションに対応しています。
CSSコードを直接コピーできますか?
はい、生成されたCSSグラデーションコードをワンクリックでコピーしてそのままWebサイトに適用できます。
グラデーションの中間に灰色の帯ができるのはなぜですか?
色相環で正反対にある2色を混ぜると、中間で彩度が0近くまで落ちて濁ったグレーを通過します。青とオレンジ、赤と緑の組み合わせでとくに起こりやすい現象です。2色の間に中間色を停止点として1つ加えればグレーを迂回でき、そもそも色相環で近い2色を選べばこの問題自体が起きません。
作成したCSSグラデーションを画像ファイルとして保存できますか?
はい。PNGとしてダウンロードできるので、スライドの背景やSNS画像、印刷物にそのまま使えます。ただしウェブページに入れる目的なら、画像よりCSSコードをそのまま使うほうがずっと有利です。ファイルを読み込む必要がなく表示が速いうえ、画面サイズが変わっても崩れず、拡大しても階段状のギザギザが出ないからです。
グラデーション生成を上手に活用するには?
- 色相環で近い2色を使うと、中間に濁ったグレーの帯が出にくくなります。
- バナーやカード背景では135度の斜めグラデーションがいちばん収まりよく見えます。
- 文字を重ねるなら、いちばん明るい停止色との対比を先に確認しましょう。
Powered by Patrache Studio Tools