CSS アニメーショングラデーション生成
線形・放射状・円錐グラデーションを作成し、アニメーションを調整して CSS を出力できます。
グラデーションのプリセット
オーシャンブリーズ
暖かい夕日
クールミント
パープルヘイズ
トロピカル
火災
わたあめ
エレクトリックバイオレット
ミッドナイト
オーロラ
ピーチ
アクアマリン
カラーストップ
CSSコード
.gradient-background {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}グラデーションタイプ
角度: 135°
色
%
%
アニメーション
グラデーションのヒント
🎨 色の調和
カラーホイール上で隣接する色を使用してスムーズな移行を実現したり、補色を使用して鮮やかで目を引く効果を実現したりできます。
⚡ パフォーマンス
background-position を使用したアニメーション化されたグラデーションは GPU で高速化され、filter アニメーションよりもパフォーマンスが高くなります。
🔧 アクセシビリティ
グラデーションの上に配置されたテキストに十分なコントラストを確保してください。 prefers-reduced-motion メディア クエリの追加を検討してください。