直感的な操作で美しいグラデーションを作成できます。
作成した色はCSSコードとしてコピーしたり、画像素材としてダウンロード保存が可能です。
このツールは …回 使われています。
Color Stops
CSS Code
background: linear-gradient(90deg, ...);
バグや表示の乱れなどがあれば、こちらよりお知らせください。
CSSの使い方
コピーしたコードは、適用したい要素のCSSに貼り付けて使用します。
例：ボタンに適用する場合
.my-button { /* ここに貼り付け */ background: linear-gradient(90deg, #56CCF2, #2F80ED); /* その他のスタイル */ color: white; border: none; }
※ background-image プロパティとしても使用可能です。
グラデーション作成のコツ
同系色でまとめる
青と水色、赤とオレンジなど、色相が近い色同士を組み合わせると、自然で美しいグラデーションになります。
青と水色、赤とオレンジなど、色相が近い色同士を組み合わせると、自然で美しいグラデーションになります。
角度を意識する
Webサイトの背景なら「135deg（左上から右下）」や「180deg（上から下）」が一般的で使いやすい角度です。
Webサイトの背景なら「135deg（左上から右下）」や「180deg（上から下）」が一般的で使いやすい角度です。
3色以上は慎重に
色が多すぎると濁って見えることがあります。初心者はまず「2色」から始めるのがおすすめです。
色が多すぎると濁って見えることがあります。初心者はまず「2色」から始めるのがおすすめです。