Testimonial templates
Clean, responsive testimonial layouts you can copy and paste as real HTML and CSS, plus a testimonial graphic maker for social posts. Preview each one live, then lift the code into your site. Free, no login.
Need wording first? Browse real testimonial examples and why each one works.
By Junaid Khalid · Updated Self-contained HTML and CSS. Paste it into any page and swap in your own quotes. No framework, no account, no script from us.
<!-- Testimonial template by testimonials.ltd. Free: https://testimonials.ltd/tools/testimonial-templates#grid -->
<section class="ttg-grid">
<style>
.ttg-grid{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:#24211d;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;max-width:1080px;margin:0 auto;padding:8px;}
.ttg-grid *{box-sizing:border-box;}
.ttg-grid .ttg-card{background:#fff;border:1px solid #e7e2da;border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:14px;margin:0;}
.ttg-grid .ttg-stars{display:inline-flex;gap:2px;color:#e0722e;line-height:0;}
.ttg-grid .ttg-q{margin:0;font-size:15.5px;line-height:1.6;color:#302d28;}
.ttg-grid .ttg-cap{display:flex;align-items:center;gap:12px;margin-top:auto;}
.ttg-grid .ttg-av{width:42px;height:42px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;}
.ttg-grid .ttg-cap>span{display:flex;flex-direction:column;}
.ttg-grid .ttg-name{font-weight:700;font-size:14.5px;}
.ttg-grid .ttg-role{font-size:13px;color:#6b665e;}
</style>
<figure class="ttg-card"><span class="ttg-stars" aria-label="5 out of 5"><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9z"/></svg><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9z"/></svg><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9z"/></svg><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9z"/></svg><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9z"/></svg></span><blockquote class="ttg-q">Super tool to manage your LinkedIn posts and much more! Highly recommended.</blockquote><figcaption class="ttg-cap"><img class="ttg-av" src="https://testimonials.ltd/proof/reviewers/dominique-dejonghe.jpg" alt="" width="42" height="42" loading="lazy" style="object-fit:cover" /><span><span class="ttg-name">Dominique Dejonghe</span><span class="ttg-role">AI for HR Consultant, Humanistix</span></span></figcaption></figure><figure class="ttg-card"><span class="ttg-stars" aria-label="5 out of 5"><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9z"/></svg><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9z"/></svg><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9z"/></svg><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9z"/></svg><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9z"/></svg></span><blockquote class="ttg-q">Very useful tool to keep engaged with intuitive ability to comment and create content.</blockquote><figcaption class="ttg-cap"><img class="ttg-av" src="https://testimonials.ltd/proof/reviewers/silvia-gray.jpg" alt="" width="42" height="42" loading="lazy" style="object-fit:cover" /><span><span class="ttg-name">Silvia Gray</span><span class="ttg-role">Executive & Professional Recruiting</span></span></figcaption></figure><figure class="ttg-card"><span class="ttg-stars" aria-label="5 out of 5"><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9z"/></svg><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9z"/></svg><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9z"/></svg><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9z"/></svg><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9z"/></svg></span><blockquote class="ttg-q">Legit feels like cloning myself. Trained it once, gave it my VA, and now I barely touch Linkedin!</blockquote><figcaption class="ttg-cap"><img class="ttg-av" src="https://testimonials.ltd/proof/reviewers/david-bryan.jpg" alt="" width="42" height="42" loading="lazy" style="object-fit:cover" /><span><span class="ttg-name">David Bryan</span><span class="ttg-role">Chrome Web Store review</span></span></figcaption></figure><figure class="ttg-card"><span class="ttg-stars" aria-label="5 out of 5"><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9z"/></svg><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9z"/></svg><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9z"/></svg><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9z"/></svg><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9z"/></svg></span><blockquote class="ttg-q">Love the simplicity of the app, and the effectivness of it! highly recommend it!!</blockquote><figcaption class="ttg-cap"><img class="ttg-av" src="https://testimonials.ltd/proof/reviewers/michael-haber.jpg" alt="" width="42" height="42" loading="lazy" style="object-fit:cover" /><span><span class="ttg-name">Michael Haber</span><span class="ttg-role">Chrome Web Store review</span></span></figcaption></figure>
</section>Fill this layout with your real testimonials
Collect testimonials with your own form and they appear in this layout on your site, in your brand colours. New ones show up by themselves, so you never edit the HTML again.
- Starts with the grid layout you picked
- Your logo, colours and font, pulled from your website
- Text and video testimonials you approve before they show
How do you make a testimonial graphic?
Paste the quote, add the name, role and stars, pick a size and a style, and download a PNG. It is for the posts, stories and slides where HTML will not go, and it needs no design app and no account. The image is drawn on a canvas in your browser and saved with the standard toBlob method, so your photo never leaves your device.
1080 x 1080, feed posts
Drawn in your browser. Your photo is never uploaded.
What size should a testimonial graphic be?
| Size | Pixels | Where it fits |
|---|---|---|
| Square | 1080 x 1080 | Instagram, LinkedIn and Facebook feed posts |
| Portrait | 1080 x 1350 | Instagram feed, takes more of the screen |
| Story | 1080 x 1920 | Stories, Reels and Shorts covers |
| Landscape | 1200 x 627 | LinkedIn link posts, X, slides and email headers |
How do you keep testimonial graphics honest?
- Use the customer's real words. The FTC's Endorsement Guides say endorsements must reflect the honest opinions and experience of the endorser.
- Show the stars they actually gave. Northwestern's Spiegel Research Center found purchase likelihood peaks at ratings between 4.0 and 4.7, so a real four-star quote is no loss.
- Ask before you use a name or photo, and keep the approval. Want wording that persuades? See real testimonial examples.
Which testimonial layout should you use?
Use a grid of quote cards for a homepage section, a carousel where space is tight, and a single spotlight above the fold. Here is when each of the eight layouts fits.
The safe default for a homepage section. Equal-height cards, three across, one on mobile. Reach for it when you have three to six solid quotes.
A packed, Pinterest-style wall where short and long quotes tuck together. The look you want when you have eight or more testimonials and want the volume to speak.
A horizontal row your visitor swipes through. Ours is pure CSS scroll-snap, so there is no JavaScript to slow the page. Best when space is tight.
One big pull-quote, centered, with a large avatar. Perfect above the fold or as a flagship testimonial that deserves the whole stage.
A testimonial styled like a social post, avatar, handle, verified tick. Feels authentic when the quote actually came from X or LinkedIn.
A thumbnail with a play overlay and a caption. Video is the highest-trust format, so give it a clean frame and let it do the work.
A trusted-by strip of client names anchored by a single strong quote. Sits naturally just under the hero as instant credibility.
A compact bar of aggregate stars, a score, and a short quote. Drop it near your pricing or CTA where a nudge of confidence matters most.
How do you add a testimonial section to your website?
Copy a template's HTML and CSS, paste it into your page, and swap in your own quotes. Give every avatar a width and height so the section does not push content around as it loads, one of the main causes of layout shift.
Choose the template that fits the spot on your page: a grid for the homepage, a carousel where space is tight, a spotlight above the fold.
See exactly how the block renders, isolated so its styles never fight your site. What you see is what you paste.
One click copies self-contained HTML and CSS. Or download it as a standalone file to open and tweak.
Drop it into your page, then swap the sample quotes, names, and avatars for your real testimonials. Restyle the colors in seconds.
Should you use copy-paste code or a live widget?
Use copy-paste code when your quotes rarely change, and a live widget when new ones keep coming in. These templates are genuinely free and yours to keep. The honest catch is that they are static: every new testimonial means editing the HTML by hand, and video is on you to host. Design tools like Canva only give you an image you cannot embed at all. testimonials.ltd takes the same layouts and makes them live, collecting real text and video testimonials for you and keeping the wall, carousel, or spotlight up to date, for one payment. You own it, you export it, and there is nothing to cancel.
See the one-time pricingTestimonial templates FAQ
How do I make a testimonial graphic?
Use the graphic maker on this page: paste the quote, add the name, role and stars, pick a size (square, portrait, story or landscape) and a style, then click Download PNG. It is drawn in your browser, so there is no login and your photo is never uploaded.
What size should a testimonial graphic be?
1080 x 1080 for feed posts on Instagram, LinkedIn and Facebook, 1080 x 1350 for portrait Instagram posts, 1080 x 1920 for Stories, Reels and Shorts covers, and 1200 x 627 for LinkedIn link posts, X and slides. The maker has all four.
What is a testimonial template?
A testimonial template is a ready-made layout for displaying a customer quote, name, photo, and rating. Ours are copy-paste HTML and CSS blocks, so you own the code, not a design file locked inside an app.
How do I add testimonials to my website?
Pick a layout above, click Copy, paste the HTML into your page and the CSS travels with it, then swap in your own quotes, names, and photos. There is nothing else to wire up.
What is the difference between these and Canva testimonial templates?
Canva gives you an image or PDF you cannot embed. These are live, responsive website code you paste directly into your site and edit anytime. One is a picture of a testimonial section, the other is the actual section.
How do I make a testimonial slider or carousel?
Use the Carousel template. Ours is pure CSS with scroll-snap, so there is no JavaScript to load and nothing to break. Copy it, paste it, and it swipes on mobile and scrolls on desktop out of the box.
How do I embed a testimonial section?
There is nothing to embed from a third party. Copy the block's HTML and CSS into your own page and it renders instantly, with no external script, no account, and no request back to us.
Do these work in Webflow, WordPress, and Framer?
Yes. Paste the HTML into an Embed or Custom Code block in Webflow, a Custom HTML block or theme file in WordPress, or an Embed element in Framer. It is standard HTML and CSS, so it works anywhere.
Are the testimonial templates responsive?
Yes. Every block uses fluid grids and collapses cleanly to a single column on small screens, and the carousel scrolls horizontally, so the section stays readable on phones.
Are they free?
Yes, free to copy and use, including commercially. No sign-up, no attribution required. The HTML comment crediting testimonials.ltd is optional and you can delete it.
Can I customize the colors and fonts?
Yes. The CSS uses simple, well-named classes so you can restyle colors, fonts, spacing, and radius in seconds. Each block also inherits your site font stack, so it blends in by default.
How many testimonials should a section show?
It depends on the layout: a wall of love wants eight or more, a three-up grid wants three to six, and a spotlight or carousel works with just one to three strong quotes.
What makes a good testimonial section?
Real names, faces, and specifics; short quotes with the customer's voice intact; a mix of formats like text, video, and ratings; and enough whitespace that the section is easy to scan.
Do I need to know how to code?
No. If you can copy and paste, you can use these. Every block is self-contained, so nothing else has to be set up. The live preview shows you the result before you commit.
Keep building your review flow
Turn a Google Maps link or Place ID into a one-tap review link. Get the real URL, a QR code (PNG and SVG), and printable review signs: table tent, poster, sticker and business card. Free, no login.
Open toolTurn your Facebook Page link or username into a direct reviews link. Get the real URL, a QR code (PNG and SVG), and printable review signs. No login.
Open toolBuild a testimonial widget in your browser: grid, carousel, slider, or marquee. Live preview, light or dark, then copy self-contained embed HTML. No signup.
Open toolPick your business type and get the exact questions to ask for a great testimonial, grouped and ready to copy. Curated per vertical, no login, no AI wait.
Open toolPick a tone and who you are asking, and a ready-to-send request email writes itself. Choose a subject line, copy it, drop in your form link. Instant, no signup.
Open tool.ltd = Lifetime Deal. Collect testimonials. Pay once. Keep them forever.