CSSをコピーする
任意の見本にカーソルを合わせて、ヒーローまたはセクションのすぐに貼り付けられる背景宣言をコピーします。
すべてのユースケースに戻る
デザインキーワード
ランディングページ向け美しい背景グラデーション
ランディングページ向けに厳選した美しい背景グラデーション集です。ライブプレビュー、CSSのワンクリックコピー、PNG保存に対応。すべて無料で、ヒーローセクションにすぐ使えます。
- 12
- 厳選されたグラデーション
- 1クリック
- CSS または PNG をコピーする
- 無料
- サインアップは必要ありません
画像として保存
グラデーションを高解像度 PNG としてダウンロードして、背景画像またはデザイン ツールで使用します。
変換準備完了
すべてのグラデーションは読みやすいテキストのコントラストになるように調整されているため、見出しとCTAに焦点が当てられます。
グラデーションギャラリー
色見本にカーソルを合わせると、CSSをコピーしたり画像として保存したりできます。現在12種類、今後も追加予定です。
ラベンダードーン
リニアlinear-gradient(135deg, #a78bfa 0%, #818cf8 100%)バイオレットミスト
リニアlinear-gradient(160deg, #ede9fe 0%, #ddd6fe 50%, #c4b5fd 100%)インディゴナイト
リニアlinear-gradient(135deg, #312e81 0%, #6d28d9 100%)オーシャンブリーズ
リニアlinear-gradient(120deg, #22d3ee 0%, #3b82f6 100%)ティールフェード
リニアlinear-gradient(150deg, #5eead4 0%, #2dd4bf 50%, #0d9488 100%)オーロラ
リニアlinear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #06b6d4 100%)サンセットコーラル
リニアlinear-gradient(130deg, #fb7185 0%, #f59e0b 100%)ピーチクリーム
リニアlinear-gradient(160deg, #fef3c7 0%, #fecaca 100%)バラの花びら
リニアlinear-gradient(135deg, #fda4af 0%, #c084fc 100%)ミント・スカイ
リニアlinear-gradient(140deg, #d1fae5 0%, #bae6fd 100%)深宇宙
リニアlinear-gradient(145deg, #0f172a 0%, #1e3a8a 60%, #4c1d95 100%)バイオレットグロー
ラジアルradial-gradient(circle at 50% 30%, #c4b5fd 0%, #7c3aed 60%, #4c1d95 100%)関連キーワード
ランディング ページを作成する準備はできましたか?
上記のユースケースを選択するか、AI を活用したビルダーを使用して最初から始めてください。プロフェッショナルでコンバージョン率の高いランディング ページを数分で作成できます。
無料で開始 · 100種類以上のテンプレート