🌈CSSグラデーション生成

カラーストップを追加・調整してlinear・radialグラデーションを視覚的に作成、CSSコード取得。リアルタイムプレビュー。

🔒 ブラウザ内処理✓ ウォーターマークなし✓ 登録不要

使い方

複雑なconic-gradientも可能ですか?+

現在はlinear/radialのみ対応しています。conic-gradient(円形時計回り)は別途入力が必要です。

2色と3色以上の違いは?+

2色はシンプルで清潔感があり、3色以上はより豊かな表現が可能です。ただし多すぎると煩雑に見えるため3〜4色以内を推奨します。

どの角度が良いですか?+

135度(左上→右下)が最も自然でよく使われます。90度(左→右)や180度(上→下)もすっきりして使いやすいです。

透明なグラデーションも作れますか?+

各カラーストップのalpha(rgba)を調整すれば可能です。文字の上に暗いグラデーションオーバーレイを作るときに便利です。

ダークモード用グラデーションのコツは?+

暗めのトーン(#1a1a2e → #16213eなど)がよく合います。あまり暗くしすぎず、少し彩度を加えると平面的にならず立体感が出ます。

古いブラウザに対応していますか?+

現代のブラウザはすべて標準CSS gradientに対応しています。IEなどの旧バージョンが必要な場合は-webkit-、-moz-などのベンダープレフィックスが必要です。