40+ Beautiful CSS Blockquotes (Free Code + Demos)
Enjoy these 100% free and open source HTML Blockquote CSS styling code examples. The list includes animated blockquotes, hover effects, typography styles, and more.
1. Quotes With Font Awesome And Pseudo Elements
Author: Jaime (jimmycow)
Links: Source Code / Demo
Created on: May 3, 2018
Made with: HTML, CSS
2. CSS Quote Box Hover Effects
Author: abdel Rhman (abdelRhman345)
Links: Source Code / Demo
Created on: January 16, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
3. CSS Quote Cards
Author: Sabine Robart (Artemis1)
Links: Source Code / Demo
Created on: January 31, 2019
Made with: HTML, SCSS, JS
4. Blockquote Website Usability: A Designer's Guide
Intuitive design happens when current knowledge is the same as the target knowledge.
Author: Juan Pablo (jupago)
Links: Source Code / Demo
Created on: January 4, 2019
Made with: HTML, CSS
Tags: ux, quote, jaredspool, usability, abrilfatface.
5. Quote: Steven Pressfield • Start Before You Are Ready
Author: Juan Pablo (jupago)
Links: Source Code / Demo
Created on: December 31, 2018
Made with: HTML, CSS
Tags: quote, blockquote, design, pressfield, gradient
6. CSS Quotes Animation
Author: Sabine Robart (Artemis1)
Links: Source Code / Demo
Created on: January 28, 2019
Made with: HTML, SCSS, JS
7. Blockquote Styles
Different styles for showing quotes. Some have gentle animations.
Author: Chris Smith (chris22smith)
Links: Source Code / Demo
Created on: November 15, 2018
Made with: HTML, SCSS
Tags: quote, blockquote, citation, cite
8. Quote Styling
Author: Joe Hastings (JoeHastings)
Links: Source Code / Demo
Created on: December 7, 2017
Made with: HTML, Less
9. Pure CSS Blockquote
Elegant and responsive blockquote solution. Highlight quote text for a neat animation.
Author: John Fink (SkyHyzer)
Links: Source Code / Demo
Created on: June 30, 2017
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: blockquote, blog, post, minimal, responsive
10. Polygon-style Gradient Pull Quote
Author: Matt Popovich (mattpopovich)
Links: Source Code / Demo
Created on: August 16, 2016
Made with: HTML, SCSS
11. Styling Blockquotes With Box-shadow
Styling blockquotes with box-shadow
Author: Ramón M. Cros (ramonmcros)
Links: Source Code / Demo
Created on: July 24, 2015
Made with: HTML, SCSS
Tags: blockquote, box-shadow, css, multiple box shadows
12. Coffee Quote - Blockquote, Flexbox, Rgba, Before Content
Experimenting with various CSS techniques to help beginners experiment with positioning, colors, transparency, and flexbox
Author: Jacob Lett (JacobLett)
Links: Source Code / Demo
Created on: February 16, 2018
Made with: HTML, CSS
Tags: blockquote, quote, flexbox, gradient
13. Quote Hovering
Author: Lisi (lisilinhart)
Links: Source Code / Demo
Created on: July 13, 2017
Made with: HTML, SCSS
14. Typography Quote
Just a simple experiment with web typography involving web fonts, flex and newer sizing units. Including punctuation that hangs into the margin! By one of my favorite authors, Robert Bringhurst.
Author: Josh Collinsworth (joshuajcollinsworth)
Links: Source Code / Demo
Created on: December 14, 2015
Made with: HTML, CSS, JS
Tags: css, typography, flex, quote, bringhurst
15. Quote Effect Using A CSS Blur Filter
Using CSS blur filter
Author: 14islands (14islands)
Links: Source Code / Demo
Created on: January 27, 2017
Made with: HTML, Stylus, Babel
Tags: css, filters, greensock
16. Flexbox Quote Bricks
Here are some quotes I like with some unrelated architecture photos. I recently had to develop a layout with background images next to blocks of color with text. The site was responsive and in a CMS, so there's no telling how long those quotes can be. I ended up using a JavaScript soluti...Read More
Author: Andrea Roenning (andreawetzel)
Links: Source Code / Demo
Created on: September 25, 2015
Made with: HTML, SCSS
Tags: flexbox
17. Get You Some Bacon
even though one probably shouldn't use the garamond for screen-typo, so sorry. try a retina display
Author: Screeny (screeny05)
Links: Source Code / Demo
Created on: December 14, 2015
Made with: HTML, SCSS
18. Day 007 Author Quote
Author: Mohan Khadka (khadkamhn)
Links: Source Code / Demo
Created on: July 15, 2015
Made with: HTML, CSS
Tags: quote, author, animate, uiux, css
19. Continuous Image Border Quote
Still plugging away at the CSS Secrets book with quotes on the brain
Author: Joni Trythall (jonitrythall)
Links: Source Code / Demo
Created on: July 6, 2015
Made with: HTML, SCSS
Tags: border, sea, quote, image-border
20. Quote Animation Inspiration
Four examples of transitions quotes with the property "transform". Four animations to see the author appear. Quatre exemples de transitions de citation avec avec la propriété «transform». Quatre animations pour voir l'auteur apparaitre.
Author: Valentin Galmand (valentingalmand)
Links: Source Code / Demo
Created on: June 27, 2015
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: animation, inspiration, text, quote, appear
21. Subtle Quote
A small quote snippet from an upcoming site. With subtle animations and all.
Author: Tim Holman (tholman)
Links: Source Code / Demo
Created on: April 16, 2014
Made with: HTML, CSS, JS
Tags: animation, css, transforms, transitions
22. Quotes
Author: Iulian Savin (Iulius90)
Links: Source Code / Demo
Created on: February 12, 2015
Made with: HTML, CSS
Tags: quote, quotes
23. Subtle Quote
A small quote snippet from an upcoming site. With subtle animations and all.
Author: Tim Holman (tholman)
Links: Source Code / Demo
Created on: April 16, 2014
Made with: HTML, CSS, JS
Tags: animation, css, transforms, transitions
24. Shiienurm Quote Card
Author: Tobias Johansson (governorfancypants)
Links: Source Code / Demo
Created on: April 5, 2014
Made with: HTML, SCSS, JS
Tags: dribbble, card, slide
25. Clean And Simple Blockquote Style
Create blockquote styles all the time and thought it was about time I created a reusable style. This is a nice clean version that could be used for all sorts.
Author: Jonathan Clift (cliftwalker)
Links: Source Code / Demo
Created on: January 29, 2015
Made with: HTML, CSS
Tags: blockquote, clean, css
26. Fancy Blockquote Style
An outtake form a fancy blockquote style that I was working on at work.
Author: Matt Soria (poopsplat)
Links: Source Code / Demo
Created on: March 27, 2015
Made with: HTML, SCSS
Tags: blockquote, fancy, css, calc
27. Classy Blockquote Styling
Author: Andrew Wright (andrewwright)
Links: Source Code / Demo
Created on: August 12, 2013
Made with: HTML, SCSS
Tags: blockquote, quote, testimonial
28. Awesome Blockquote Styling With CSS
Here is a simple CSS code to style your HTML blockqoutes.
Author: Max (maxds)
Links: Source Code / Demo
Created on: November 19, 2013
Made with: HTML, CSS
Tags: blockquote, css, styling
29. Notepaper Blockquote
By CSSFlow: free UI elements and widgets coded with HTML5, CSS3, and Sass. View the original article and download the Sass/SCSS source at: cssflow.com/snippets/notepaper-blockquote Original PSD by Liam McCabe. Tested in Firefox 4, Safari 4, Chrome 13, Opera 10, IE 6 (and newer).
Author: Thibaut (Thibaut)
Links: Source Code / Demo
Created on: January 30, 2013
Made with: HTML, CSS
Tags: css3, pure-css, ui, blockquote, quote
30. 12 - CSS3 Blockquote Effects Demos
Here is a simple CSS code to style your HTML blockqoutes.
Author: Pawan Mall (iPawan)
Links: Source Code / Demo
Created on: February 24, 2015
Made with: HTML, CSS
Tags: blockqoutes, css, html, effects, pawan mall
31. Better Bootstrap Blockquote
based on code snippet found on Bootstrap Snippet (http://bootsnipp.com/snippets/featured/a-better-blockquote#comments)
Author: LASHirsh (LASHirsh)
Links: Source Code / Demo
Created on: November 29, 2016
Made with: HTML, CSS
32. Quote Box
Simple example to create a stylish quote box with CSS.
Author: Mario Rodriguez (mariordev)
Links: Source Code / Demo
Created on: March 24, 2016
Made with: HTML, CSS
Tags: css, quote-box, quote
33. Highlighted Blockquote With Citation
Author: Barbara Lewis (siegemediadev)
Links: Source Code / Demo
Created on: June 11, 2020
Made with: HTML, CSS
Tags: blockquote, quote
34. Review Block
Author: Alex Sommers (al_somz7)
Links: Source Code / Demo
Created on: April 27, 2020
Made with: HTML, SCSS
Tags: flexbox, css-variables, blockquote, reviews
35. Pure CSS Quotes
Author: Studio VA (studiovacommunication)
Links: Source Code / Demo
Created on: March 23, 2020
Made with: HTML, CSS, JS
Tags: purecss, quotation, blockquote, citation, cite
36. Quote 1 - Orange Peel
A stylish blockquote, version 1 Written on mobile with desktop site (more usable than mobile site IMO) to post to instagram. 🙃 Edit: made font more responsive.
Author: Mugtaba G (Oddward)
Links: Source Code / Demo
Created on: September 19, 2019
Made with: HTML, SCSS
Tags: blockquote, quote, text, decoration, orange
More Awesome Lists:
Share: