CSSグラデーションジェネレーター
色と角度を選び、プレビューを確認して、backgroundのCSSをコピーします。
CSS
CSSグラデーションをオンラインで作る
グラデーション背景は、ヒーローセクション、ボタン、カード、写真に重ねるオーバーレイなどに使われます。このページはCSSジェネレーターをグラデーションのタブで開くので、角度や色を目で見ながら試し、CSSの1行をそのままコピーできます。
例
| CSS | 結果 |
|---|---|
linear-gradient(90deg, #6c5ce7 0%, #00b894 100%) | 左の紫から右の緑へ |
linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) | 下に向かって暗くなる。写真の上の文字を読みやすくするのに使う |
radial-gradient(circle, #ffffff 0%, #dfe6e9 100%) | 中心がふんわり明るい |
conic-gradient(from 0deg, #e17055 0% 25%, #0984e3 25% 100%) | 4分の1の円グラフ |
コツ
カラーホイールで近い色どうしはなめらかに混ざります。反対側の色どうしは中間がくすんだ灰色になりがちですが、あいだに1色足せば解消します。文字のコントラストにも気を付けましょう。グラデーションのいちばん明るい部分と暗い部分を、文字の色と比べて確認してください。
関連ツール
同じ要素に影を付けるなら、ボックスシャドウジェネレーターをご覧ください。色をHEX、RGB、HSLに変換するにはカラー変換ツールを使います。