CSSグラデーションジェネレーター
リニアまたはラジアルグラデーションを作成し、CSS、Tailwind、またはPNGとしてエクスポートします。
Use this CSS gradient generator to build linear or radial gradients with full control over color stops, angle, and sizing. Start from a preset palette or build your own, then copy clean CSS or Tailwind classes for immediate use in design systems. Need static exports? Set the exact output size and download PNGs that match your hero, banner, or background dimensions. The live preview makes it easy to align brand colors, and the export tools keep your workflow fast—no plug‑ins, no uploads, and no login required.
操作
Presets
0°90°180°270°360°
画像サイズ
編集時の整列に役立ちます。エクスポートされた画像は常に表示されている色と一致します。
エクスポート
Code Preview
.gradient {
background: linear-gradient(90deg, rgba(59, 130, 246, 1) 0%, rgba(139, 92, 246, 1) 50%, rgba(236, 72, 153, 1) 100%);
}bg-gradient-to-b from-[#3b82f6] via-[#8b5cf6] to-[#ec4899]ライブプレビュー
1920×1080
カラーストップ
0%50%100%
Edit Color Stop
使い方
- • 色のストップをタイムライン上でドラッグして位置を調整します
- • ストップをクリックして選択し、色を編集します
- • 素早くカラーパレットを作成するために、プリセットパレットから選択します
- • コントロールでグラデーションの角度または形状を調整します
- • PNG画像としてエクスポートするか、CSS/Tailwindコードをコピーします