グラデーションジェネレーター
直感的なビジュアルエディターで美しいCSSとTailwindのグラデーションを作成
タイプ
角度
135°Presets
カラーストップ
%
%
.element {
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
}linear-gradient(135deg, #6366f1 0%, #ec4899 100%)よくある質問
線形・放射状・円錐形グラデーションの違いは何ですか？
線形グラデーションは直線に沿って色を変化させます。放射状グラデーションは中心点から外側に向かって放射します。円錐形グラデーションはカラーホイールのように中心点を軸に色を回転させます。
Tailwind CSSでグラデーションを使うにはどうすればいいですか？
Tailwindタブに切り替えて生成されたクラス名をコピーしてください。Tailwindプロジェクトに直接貼り付けるだけで、標準カラーには追加設定は不要です。
カラーストップを3つ以上追加できますか？
はい — '色を追加'をクリックして好きなだけ追加し、ドラッグまたは正確な位置を入力することで、グラデーション内の各色の位置を細かく調整できます。
ReactやほかのフレームワークでもグラデーションCSSは使えますか？
もちろんです。CSSの出力はスタイルを適用できる場所ならどこでも使えます。Reactのインラインスタイル、Vue、Svelte、プレーンHTML、どのCSSスタイルシートにも対応しています。