Create a modern, attractive SaaS website landing page with the use of smart gradients and slick animations including appealing, modern mouse hover animations.
0bfd444 verified | /* Custom CSS for animations and gradients */ | |
| .gradient-bg { | |
| background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); | |
| background-size: 400% 400%; | |
| animation: gradientShift 15s ease infinite; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| @keyframes gradientShift { | |
| 0% { | |
| background-position: 0% 50%; | |
| } | |
| 50% { | |
| background-position: 100% 50%; | |
| } | |
| 100% { | |
| background-position: 0% 50%; | |
| } | |
| } | |
| .animate-text-gradient { | |
| background-size: 200% auto; | |
| animation: textGradient 3s linear infinite; | |
| } | |
| @keyframes textGradient { | |
| to { | |
| background-position: 200% center; | |
| } | |
| } | |
| .feature-card { | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Dark mode support */ | |
| .dark .gradient-bg { | |
| opacity: 0.3; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| .dark ::-webkit-scrollbar-track { | |
| background: #1f2937; | |
| } | |
| .dark ::-webkit-scrollbar-thumb { | |
| background: #4b5563; | |
| } | |
| /* Pricing toggle animation */ | |
| #billing-toggle { | |
| transform: translateX(0); | |
| } | |
| #billing-toggle.yearly { | |
| transform: translateX(100%); | |
| } | |
| /* Price animation */ | |
| .price-crossed { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .price-crossed::after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 50%; | |
| width: 100%; | |
| height: 2px; | |
| background: #ef4444; | |
| transform: rotate(-15deg); | |
| animation: strike 0.3s ease-out; | |
| } | |
| @keyframes strike { | |
| from { | |
| width: 0; | |
| } | |
| to { | |
| width: 100%; | |
| } | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .gradient-bg { | |
| animation-duration: 20s; | |
| } | |
| } |