Collection of hand-picked HTML and CSS blockquote code examples from Codepen, GitHub and other resources: animated, hover effects, typography styles, etc. Update of February 2021 collection. 6 new items.
Related Articles
Links
Made with
- HTML / CSS (SCSS)
About a code
Some Quote
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (Sass)
About a code
Compact Book Quotes
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: tailwind.css
Links
Made with
- HTML / CSS (SCSS)
About a code
Quote Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Quote Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: tailwind.css
Links
Made with
- HTML / CSS
About a code
Blockquote Styling
blockquote element styling.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Blockquote & Cite
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Grid Tschichold Quote
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Sass)
About a code
Responsive Pull Quote
This responsive pullquote is really an illusion. The text is moving, not the quote.Creates an interesting callout without CSS Grid.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
HTML Text Inside a Circle Shape
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Quote Cards
Sliding quote cards.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS)
About the code
Quote Animation
Pure CSS, flashy purple gradient text with background-clip masking, animation sequence to reveal words & brackets.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Quote Box Hover Effects
HTML and CSS quote with box hover effects.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About the code
Pure CSS Quote
Pure CSS quote with speech bubble border.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Quote: Steven Pressfield
HTML and CSS quote with top/bottom border.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Blockquote Styles
Different styles for showing quotes. Some have gentle animations.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML
- CSS
About the code
Quote Example
Quotes with Font Awesome and pseudo elements.
Links
Made with
- HTML / CSS
About the code
Blockquote, Flexbox, RGBA, Before content
Experimenting with various CSS techniques to help beginners experiment with positioning, colors, transparency, and Flexbox.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML
- CSS/Less
About the code
Quote Styling
Elegant quote styling.
Quote Hovering
HTML and CSS quote hovering.
Made by Lisi
July 18, 2017
Links
Made with
- HTML (Pug) / CSS (Sass)
About the code
Pure CSS Blockquote
Elegant and responsive blockquote solution. Highlight quote text for a neat animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css, ionicons.css
CSS Typography Quote
For what it's worth, you can replace the quote with one of your own. As long as each paragraph is marked up properly and the author attribution is also in a paragraph tag, the quotes will still function the same way!
Made by Josh Collinsworth
February 9, 2017
CSS Quote Effect
Quote effect using a CSS blur filter.
Made by 14islands
January 27, 2017
Flexbox Quote Bricks
Quote Bricks with HTML and CSS flexbox.
Made by Andrea Roenning
October 6, 2016
Links
Made with
- HTML / CSS (SCSS)
About a code
Polygon-Style Gradient Pull Quote
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
CSS Quote Style
HTML and CSS quote style.
Made by Screeny
February 6, 2016
Links
Made with
- HTML / CSS
About a code
Alternating Blockquotes
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Material Quotation Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Stylish Blockquote
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Styling Blockquotes
Styling blockquotes with box-shadow.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Quote Author
Only CSS quote style.
Made by Mohan Khadka
July 15, 2015
Links
Made with
- HTML / CSS (SCSS)
About a code
Continuous Image Border Quote
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Quote Animation Inspiration
Four examples of transitions quotes with the property "transform". Four animations to see the author appear.
Made by Valentin Galmand
June 27, 2015
Quote
HTML and CSS quote.
Made by Jose Manuel Gulias Lugo
April 23, 2015
Links
Made with
- HTML / CSS (SCSS)
About a code
Fancy Blockquote Style
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Quote Container
Pure CSS quote container.
Made by Iulian Savin
February 12, 2015
Subtle Quote
A small quote snippet. With subtle animations and all.
Made by Tim Holman
April 16, 2014
Quote Card
HTML, CSS and JavaScript quote card.
Made by Tobias Johansson
April 5, 2014
Links
Made with
- HTML / CSS
About a code
Blockquote Stylée Littéraire
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (Less)
About a code
Damn Simple Blockquote
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -