CSS グラデーション生成
グラデーションの種類を選び、角度とカラーストップを調整すると、そのまま使える CSS や Tailwind の任意値（arbitrary value）をコピーできます。プレビューは編集と同時に更新されます。
無料 ブラウザ内で処理 登録不要
プリセット
カラーストップ
0%
50%
100%
CSS
linear-gradient(135deg, #7F52FF 0%, #B9A3FF 50%, #0B0B10 100%)
Tailwind
bg-[linear-gradient(135deg,_#7F52FF_0%,_#B9A3FF_50%,_#0B0B10_100%)]
色は16進数で指定し、編集するとプレビューがすぐに更新されます。
使い方
1
種類を選ぶ
線形・放射・円錐のグラデーションを切り替え、角度を設定します。
2
ストップを調整する
色を選び、位置を動かし、最大5つまでカラーストップを追加できます。
3
コードをコピーする
CSS のルールまたは Tailwind の任意値をコピーして、プロジェクトに貼り付けます。
このツールの特長
3種類のグラデーション
線形・放射・円錐のグラデーションを、1つのエディタと1つのプレビューで扱えます。
Tailwind の出力
通常の CSS 値とあわせて、そのまま貼り付けられる bg-[…] クラスも取得できます。
プリセットとランダム
アイデアが必要なときは、プリセットから始めるか、配色をランダムに生成できます。
よくある質問
円錐グラデーションに対応しているブラウザは？
Chrome、Edge、Firefox、Safari の現行バージョンは conic-gradient に対応しています。古いブラウザでは背景が表示されないため、下地に単色を指定しておくと安全です。
Tailwind の値はどう使いますか？
生成された bg-[…] クラスを HTML または JSX に貼り付けてください。スペースはアンダースコアに置き換えられ、Tailwind の任意値の書き方に合わせています。
透明な色も使えますか？
はい。カラーピッカーはアルファチャンネル付きの8桁の16進数を出力し、CSS と Tailwind のどちらでも扱えます。
放射グラデーションで角度が無効なのはなぜ？
放射グラデーションは中心から広がるため、回転させる向きがありません。角度は線形と円錐のグラデーションで有効です。
何かアップロードされますか？
いいえ。グラデーションはブラウザ内で生成され、サーバーに送信されることはありません。
関連ツール
色とデザイン カラーコード変換 色を HEX、RGB、HSL、HSV の間で変換し、カラーピッカーから選ぶだけで CSS やデザインツールでそのまま使える値をコピーできます。 色とデザイン コントラストチェッカー 文字色と背景色のコントラスト比を計算し、通常テキストと大きなテキストが WCAG AA・AAA を満たすかをその場で判定します。 画像ツール 画像形式変換ツール PNG、JPG、WebP の画像をブラウザ内で変換します。出力形式と品質を選び、対応形式では透明を保ったまま、すぐにダウンロードできます。 開発ツール Base64 エンコード・デコード テキストを Base64 に変換したり、Base64 をテキストに戻したりできます。UTF-8 と URL セーフに対応し、すべてブラウザ内で完結します。 テキストツール ケース変換ツール テキストを大文字、小文字、タイトルケース、文頭のみ大文字、camelCase、PascalCase、snake_case、kebab-case に即座に変換できます。 単位換算 日付計算ツール 2つの日付の差を計算し、日・週・月・年単位での加算と減算、正確な年齢の算出も行えます。すべてブラウザ内で完結し、入力と同時に結果が更新されます。
最終更新: