CSSグラデーションジェネレーター
ブラウザを離れずに背景、ボタン、ヒーロー用CSSグラデーションを作成。linear、radial、conicを切り替え、角度や位置を設定、最大8カラーストップを追加し、用意された `background:` 宣言またはグラデーション値のみをコピー。ストップ色にはHEX to…
CSSグラデーションジェネレーターについて
ブラウザを離れずに背景、ボタン、ヒーロー用CSSグラデーションを作成。linear、radial、conicを切り替え、角度や位置を設定、最大8カラーストップを追加し、用意された `background:` 宣言またはグラデーション値のみをコピー。ストップ色にはHEX to RGBコンバーター、公開前にはCSSミニファイアと組み合わせてください。何もアップロードされません。
CSSグラデーションジェネレーターの使い方
- linear、radial、conicのいずれかを選択。
- 角度（linear / conic）または形状と位置（radial / conic）を設定。
- カラーストップを編集 - hexとオプション% - またはストップを追加。
- background CSSまたはグラデーション値をスタイルシートにコピー。すべてデバイス上に留まります。
CSSグラデーションジェネレーターの例
対角ブランドウォッシュ
linear-gradient(135deg, #3b82f6 0%, #ec4899 100%) - 一般的なヒーローやカード背景。
ソフトradialスポットライト
radial-gradient(circle at center, #ffffff 0%, #e2e8f0 100%) - ソフトビネットやモーダル背景。
conicカラーホイール
conic-gradient(from 0deg at center, #ff0000 0%, #00ff00 50%, #0000ff 100%) - チャートや装飾リング。
3ストップlinearフェード
2つのブランド色の間に中間ストップ（例：50%で#22c55e）を追加してより豊かなブレンド。
一般的な使用例
- CSSでヒーローやセクション背景をデザイン
- マルチストップグラデーションでボタンやバッジ塗りを構築
- radialスポットライトやソフトビネットをプロトタイプ
- conicチャートや装飾リングを作成
- 本番向けbackground宣言をコピー
CSSグラデーションジェネレーターに関するよくある質問
- どのCSSグラデーション型に対応？
- Linear、radial、conic。Linearは度単位の角度。Radialはcircle/ellipseと位置。Conicはfrom-angleと位置。
- カラーストップの仕組みは？
- 各ストップはhex色と0%〜100%のオプション位置。位置を空にするとブラウザが均等配置。有効な色は最低2つ必要。
- backgroundルール全体とグラデーションのみ、どちらをコピー？
- 貼り付け用 `background: linear-gradient(...);` にはCopy background。`background-image`やカスタムプロパティ内など関数のみ必要ならCopy value。
- 透明や8桁hexは使える？
- はい。#rrggbbaaを入力（またはソリッド色を選んでhex編集）。無効hexは修正までスキップ。
- 入力はデバイスから離れますか？
- いいえ。CSSグラデーションジェネレーターは完全にブラウザ内。色と設定はアップロード・保存されません。
関連ツール
カラーパレットジェネレーター
ブラウザで無料カラーパレットジェネレーター。補色、類似色、トライアド、テトラード、split-complementary、モノクロ、ランダムパレットを構築。HEX、RGB、HSL、CSS変数をコピー。
HEX と RGB 変換
HEX と RGB（双方向）、HSL、CMYK、ティント・シェード、WCAG コントラスト、CSS トークンスニペット - 無料オンラインカラー変換。
RGB と HSL 変換
RGB と HSL を即相互変換。ライブスウォッチとコピー可能な rgb()/hsl() CSS の無料オンラインカラー変換。
PXからREMへのコンバーター
設定可能なベースフォントサイズでpxをremとemにオンライン変換。クイックリファレンス表付き無料px to remコンバーター。ブラウザで動作。
CSS Minifier
無料オンライン CSS minifier。コメント除去と空白圧縮で CSS を minify - 小さなスタイルシート、高速表示。ブラウザ内、アップロード不要。