Stylish Testimonial Card Layout in CSS – Modern Feedback UI for Any Website

Social proof is key in gaining trust online. These testimonial cards are designed to look modern and professional — showcasing star ratings, client quotes, and attribution in a clean grid. Perfect for portfolios, SaaS websites, agencies, or e-commerce.

Preview

HTML Code

  <section class="testimonials-section">
    <div class="testimonials-header">
      <div class="titles">
        <h2>Clients Feedback</h2>
        <h1>What our clients say<br>about Acrocampaign</h1>
      </div>
      
    </div>
    <div class="testimonials">
      <div class="testimonial-card">
        <div class="stars">
          <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
        </div>
        <p class="testimonial-text">The team’s efficiency and attention to detail blew us away. Our projects are now delivered faster than ever, without sacrificing an ounce of quality. Truly impressive!</p>
        <div class="testimonial-author">Vloger</div>
        <div class="testimonial-company">Ajmer Sandhu, Sweden</div>
      </div>
      <div class="testimonial-card">
        <div class="stars">
          <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
        </div>
        <p class="testimonial-text">After sampling multiple editors, Acrocampaign stood out for their responsiveness and creative flair. The trial edits convinced us immediately—no contest!</p>
        <div class="testimonial-author">NLP Trainer</div>
        <div class="testimonial-company">Hanifa Aktar, India</div>
      </div>
      <div class="testimonial-card">
        <div class="stars">
          <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
        </div>
        <p class="testimonial-text">The consistency of their edits, even on messy source footage, is remarkable. Their understanding of our brand voice has saved us hours in review.</p>
        <div class="testimonial-author">Production Manager</div>
        <div class="testimonial-company">Educational Video Company, UK</div>
      </div>
    </div>
  </section>

CSS Code

  <style>

    .testimonials-section {
      max-width: 1200px;
      margin: 0 auto;
      padding: 50px 20px;
    }
    .testimonials-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 40px;
    }
    .testimonials-header .titles {
      max-width: 70%;
    }
    .testimonials-header .titles h2 {
      font-size: 16px;
      text-transform: uppercase;
      margin: 0 0 10px;
      color: #bbb;
      letter-spacing: 1px;
    }
    .testimonials-header .titles h1 {
      font-size: 34px;
      margin: 0;
      line-height: 1.2;
    }
    .quote-icon {
      font-size: 80px;
      color: #222;
      opacity: 0.4;
    }
    .testimonials {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .testimonial-card {
      background-color: #242634;
      padding: 20px;
      border-radius: 8px;
      flex: 1 1 300px;
      max-width: 350px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      position: relative;
    }
    .testimonial-card .stars {
      margin-bottom: 15px;
    }
    .testimonial-card .stars span {
      color: #f5b50a;
      margin-right: 3px;
      font-size: 14px;
    }
    .testimonial-text {
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 15px;
    }
    .testimonial-author {
      font-weight: bold;
      font-size: 15px;
      margin-bottom: 5px;
    }
    .testimonial-company {
      color: #a1a1b5;
      font-size: 13px;
    }
    
    @media (max-width: 992px) {
    
    
    .testimonials-header .titles {
    max-width: 100%;
        
    }
    
    }


  </style>

Features

• Star ratings using Unicode
• Responsive CSS grid layout
• Dark theme with subtle shadows
• Professional typography

Where You Can Use This

• Client testimonial sections
• Product review pages
• Course/platform feedback
• Team endorsements or social proof

How to Customize

• Replace ★★★★★ with star icons (e.g. SVG or Font Awesome)
• Add profile images or avatars
• Switch to light theme by adjusting background and text colors

Ishaan Singh

Ishaan is a passionate programmer with a knack for simplifying complex ideas. With expertise in Python and PHP, he enjoys creating small projects that help others learn and apply coding skills practically. Through his articles, Ishaan aims to inspire and educate budding developers.