13 CSS Quote Styles

August 21, 2017 | by Vladimir Stepura

Collection of hand-picked HTML and CSS quote styles. Demo and code (*zip).

Demo Image: Quote Hovering
Demo GIF: Quote Hovering

Quote Hovering

HTML and CSS quote hovering.
Made by Lisi
July 18, 2017

Demo Image: CSS Quote Style
Demo Image: CSS Quote Style

CSS Quote Style

HTML and CSS quote style.
Made by Andy Hullinger
June 21, 2017

Demo Image: CSS Typography Quote
Demo Image: CSS Typography Quote

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

Demo Image: CSS Quote Effect
Demo Image: CSS Quote Effect

CSS Quote Effect

Quote effect using a CSS blur filter.
Made by 14islands
January 27, 2017

Demo Image: Flexbox Quote Bricks
Demo Image: Flexbox Quote Bricks

Flexbox Quote Bricks

Quote Bricks with HTML and CSS flexbox.
Made by Andrea Roenning
October 6, 2016

Demo Image: CSS Quote Style
Demo Image: CSS Quote Style

CSS Quote Style

HTML and CSS quote style.
Made by Screeny
February 6, 2016

Demo Image: Quote Author
Demo Image: Quote Author

Quote Author

Only CSS quote style.
Made by Mohan Khadka
July 15, 2015

Demo Image: Continuous Image Border Quote
Demo Image: Continuous Image Border Quote

Continuous Image Border Quote

Continuous image border quote with HTML and CSS.
Made by Joni Trythall
July 6, 2015

Demo Image: Quote Animation Inspiration
Demo GIF: Quote Animation Inspiration

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

Demo Image: Quote
Demo Image: Quote

Quote

HTML and CSS quote.
Made by Jose Manuel Gulias Lugo
April 23, 2015

Demo Image: Quote Container
Demo Image: Quote Container

Quote Container

Pure CSS quote container.
Made by Iulian Savin
February 12, 2015

Demo Image: Subtle Quote
Demo Image: Subtle Quote

Subtle Quote

A small quote snippet. With subtle animations and all.
Made by Tim Holman
April 16, 2014

Demo Image: Quote Card
Demo Image: Quote Card

Quote Card

HTML, CSS and JavaScript quote card.
Made by Tobias Johansson
April 5, 2014

FreeFrontend © 2016 - 2017

Back to top