CSS グラデーションジェネレーター
線形 / 放射状の CSS グラデーションをビジュアルにデザインできます。種類を選び、角度や形を調整し、好きなだけカラーストップを追加してライブプレビューで確認。結果は通常の CSS ルール、または Tailwind の任意値クラスとしてコピーできます。
—
種類
カラーストップ
- 0%
- 100%
プレビュー
CSS
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
Tailwind
bg-[linear-gradient(135deg,_#3b82f6_0%,_#8b5cf6_100%)]
使い方
- 線形か放射状を選択。
- 角度（線形）または形（放射状）を調整。
- カラーストップを編集し、位置スライダーをドラッグ。
- CSS ルールまたは Tailwind クラスをコピー。
よくある質問
- Tailwind の任意値とは？
- bg-[…] 形式の任意値クラスを使えば、別の CSS ファイルを書かずに Tailwind プロジェクトへ直接グラデーションを適用できます。
- カラーストップは何個まで？
- 何個でも — 通常 3〜5 個が見栄え良いですが、数に制限はありません。
- グラデーションは保存される？
- 最後のデザインはブラウザのローカルストレージに自動保存され、次回開いた時に復元されます。
- なぜ Tailwind クラスにアンダースコア？
- Tailwind は空白をクラス区切りとして扱うため、任意値では空白の代わりにアンダースコアを使います。
関連ツール
Conic Gradient ジェネレーター
CSS `conic-gradient()` のビジュアルビルダー — 回転角度·中心位置·カラーストップ·図形プレビュー。パイチャート·リングチャート·チェック柄·カラーホイールに便利。
カラー 0 0
カラートークンエクスポーター
カラーパレットを1回定義 → CSSカスタムプロパティ·Tailwind設定·SCSS·LESS·デザイントークンJSON·SwiftUI Color·Android `colors.xml` にエクスポート。ライブプレビュースウォッチ。
カラー 0 0
カラー名検索
任意のhex/RGB色に最も近いCSS・Tailwind・XKCD色名をOKLabの知覚距離で順位付け表示。
カラー 0 0
CSS ブレンドモード シミュレーター
W3C コンポジティング仕様の 16 種類の mix-blend-mode(multiply·screen·overlay·soft-light·hue·color·luminosity など)を 2 色に適用した結果を一覧比較し、各モードの CSS スニペットをコピーできます。
カラー 0 0
カラー ミキサー
2 色を RGB・HSL・CIELAB 空間で補間。11 段階の中間グラデーション ストリップ表示。
カラー 0 0
カラー補間 / グラデーションステップ
2 つの 16 進カラーを選び、N の離散中間ステップを得る — sRGB、線形 RGB、OKLab または HSL で — オプションのイージング付き。
カラー 0 0