CSSグラデーションジェネレーター
リニアまたはラジアルグラデーションを作成し、CSS、Tailwind、またはPNGとしてエクスポートします。
操作
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コードをコピーします