→ Julian Parker
→ Modern SaaS Pricing Cards with Dynamic E...

Modern SaaS Pricing Cards with Dynamic Effects

A visually stunning pricing table featuring gradient backgrounds, interactive hover effects, and animated icons perfect for SaaS platforms and subscription services.

This Example is contributed by Julian Parker, on 12-Mar-2025. It is responsive. similar terms for this example are Subscription Plan,Pricing Tier,Pricing Table,Pricing,Service rates,Subscription plans

Hover Animation Pricing Card Gradient Card

Author Julian Parker

Fork Fullscreen

<div class="pricing-container">
  <div class="pricing-header">
    <h1>Choose Your Perfect Plan</h1>
    <p>Select the option that works best for your needs</p>
  </div>
  
  <div class="pricing-cards">
    <div class="pricing-card card-basic">
      <div class="card-background">
        <span class="background-icon">★</span>
      </div>
      <div class="card-content">
        <h3>Basic</h3>
        <p class="subtitle">For individuals getting started</p>
        <div class="price">
          <span class="currency">$</span>
          <span class="amount">0</span>
          <span class="period">/month</span>
        </div>
        <ul class="features">
          <li>1 Project</li>
          <li>5 GB Storage</li>
          <li>Basic Support</li>
          <li>Limited Features</li>
        </ul>
        <button class="cta-button">Start Free</button>
      </div>
    </div>
    
    <div class="pricing-card card-pro">
      <div class="card-background">
        <span class="background-icon">◆</span>
      </div>
      <div class="card-content">
        <h3>Professional</h3>
        <p class="subtitle">For growing businesses</p>
        <div class="price">
          <span class="currency">$</span>
          <span class="amount">29</span>
          <span class="period">/month</span>
        </div>
        <ul class="features">
          <li>10 Projects</li>
          <li>50 GB Storage</li>
          <li>Priority Support</li>
          <li>Advanced Features</li>
        </ul>
        <button class="cta-button">Get Started</button>
      </div>
    </div>
    
    <div class="pricing-card card-enterprise">
      <div class="card-background">
        <span class="background-icon">♦</span>
      </div>
      <div class="card-content">
        <h3>Enterprise</h3>
        <p class="subtitle">For large organizations</p>
        <div class="price">
          <span class="currency">$</span>
          <span class="amount">99</span>
          <span class="period">/month</span>
        </div>
        <ul class="features">
          <li>Unlimited Projects</li>
          <li>500 GB Storage</li>
          <li>24/7 Dedicated Support</li>
          <li>All Premium Features</li>
        </ul>
        <button class="cta-button">Contact Sales</button>
      </div>
    </div>
  </div>
</div>

Related Examples