EspañolPull quote in HTML and CSS (blockquote)
Write the quote and the author and choose the style and colors. The preview shows the quote in the middle of a text.
How to useOne line that keeps the reader hooked
Available in: 
Pull quote in HTML and CSS (blockquote): what it is for
Highlight a line in the middle of your text: a customer testimonial, an interview excerpt or the main idea of a post. Write the quote, the author and their title, and choose one of five styles: side border, big quotation marks, card, large centered and colored band, with the accent color and font you prefer.
The code uses figure, blockquote and figcaption, the semantic way to mark up a quote with its author, and accepts the source URL in the cite attribute. The preview shows the quote between two paragraphs, just as it looks in a real post.
How to use
- Write the quote and the author.
- Choose the style, color and font.
- Copy the code into your site.
When to use it
- Featured testimonial on the home page.
- Interview excerpt on a blog.
- Pull quote in the middle of a post.
Frequently asked questions
What is the difference between blockquote and q?
blockquote is for a block quote set apart from the text, like the ones this tool generates. q is for a short quote inside a sentence, and the browser adds the quotation marks on its own.
How do I credit the author properly?
Wrap the quote in a figure and put the author in a figcaption right below it, as in the generated code. The author's name does not go inside the blockquote, because it is not part of what was said. If the quote came from a web page, use the cite attribute with its URL.
Can I use it as a customer testimonial?
Yes, for a featured testimonial. Use real quotes, with the person's permission. For several testimonials together, use the testimonials section generator.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.