CSSグラデーションジェネレーター

CSSの線形、放射状、円錐グラデーションを視覚的に作成します。複数のカラーストップを追加してCSSをコピーできます。

スタジオ · ニュートラル環境

カラーストップ — ハンドルをドラッグで移動、トラックをクリックで追加

種類

角度 90°

カラーストップ

CSS

機能

線形・放射状・円錐形

複数のカラーストップ

角度・方向を指定

プレビューと CSS を同時表示

使い方

1. グラデーションの種類と角度を選ぶと、ステージにフルサイズでプレビューされます。

2. トラック上のハンドルをドラッグしてストップを移動、空いた場所をクリックして追加（最大 6 個）。カラーウェルとパーセント入力で微調整もできます。

3. 生成された CSS をコピーします — 市松の下地で透過部分の縞（バンディング）も確認できます。

このツールについて

CSS グラデーションは画像ファイルなしでなめらかな色の移り変わりを描くので、どんなサイズでもくっきりしていて、ダウンロードの負担もありません。このジェネレーターは3種類のネイティブなグラデーションを作れます。角度に沿った linear-gradient、中心から広がる radial-gradient、カラーホイールのように中心の周りを回る conic-gradient です。トラック上のハンドルをドラッグしてカラーストップを動かし、トラックの空いている場所をクリックしてストップを追加し（最大6つ）、入力欄で色と位置を細かく調整できます。ステージは結果を全画面サイズで表示し、チェック柄の背景では色の段差（バンディング）や思わぬ透明部分が分かります。出力は現在のすべてのブラウザーで使える標準の CSS で、background や background-image にそのまま貼り付けられます。

よくある質問

線形・放射状・円錐状のグラデーションの違いは？

線形グラデーションは指定した角度の直線に沿って色が変わります。放射状グラデーションは中心点から円や楕円で外側へ広がります。円錐状グラデーションは中心点の周りを色が回転し、円グラフやカラーホイールに便利です。

グラデーションの角度はどう決まりますか？

0deg は上、90deg は右、180deg は下、270deg は左を指します。つまり linear-gradient(90deg, red, blue) は左端が赤、右端が青になります。

グラデーションに色の段差（バンディング）が出るのはなぜですか？

似た2色を広い面積に引き伸ばすと、特に8ビットのディスプレイで段差が出やすくなります。中間のストップを追加する、コントラストのある色を選ぶ、うっすらとノイズを重ねるといった方法が効果的です。

グラデーションに透明を含められますか？

できます。rgba や8桁の HEX などアルファ値付きの色を使ってください。キーワードの transparent に向かってフェードすると中間が灰色がかることがあるので、同じ色のアルファ0に向かってフェードするほうがきれいです。

グラデーションを文字色や枠線に使えますか？

CSS を少し追加すれば使えます。文字の場合はグラデーションを背景に設定し、background-clip: text と透明な文字色を指定します。枠線の場合は border-image か、外側のラッパー要素の背景を使う方法が一般的です。

CSSグラデーションジェネレーター

機能

使い方

このツールについて

よくある質問

関連ツール