TOP 24 CSS Blockquotes

QUOTE CARDS

Sliding quote cards.

See the Pen Quote cards by Sabine Robart (@_Sabine) on CodePen.

QUOTE ANIMATION

Pure CSS, flashy purple gradient text with background-clip masking, animation sequence to reveal words & brackets.

See the Pen Quotes animation by Sabine Robart (@_Sabine) on CodePen.

QUOTE BOX HOVER EFFECTS

HTML and CSS quote with box hover effects.

See the Pen CSS Quote Box Hover Effects by abdel Rhman (@abdelRhman345) on CodePen.

PURE CSS QUOTE

Pure CSS quote with speech bubble border.

See the Pen Quote: Jared Spool • Web Site Usability: A Designer’s Guide by Juan Pablo (@jupago) on CodePen.

QUOTE: STEVEN PRESSFIELD

HTML and CSS quote with top/bottom border.

See the Pen Quote: Steven Pressfield • Start before you are ready by Juan Pablo (@jupago) on CodePen.

BLOCKQUOTE STYLES

Different styles for showing quotes. Some have gentle animations.

See the Pen Blockquote Styles by Chris Smith (@chris22smith) on CodePen.

QUOTE EXAMPLE

Quotes with Font Awesome and pseudo elements.

See the Pen Quotes with Font Awesome and pseudo elements by Jaime (@jimmycow) on CodePen.

BLOCKQUOTE, FLEXBOX, RGBA, BEFORE CONTENT

Experimenting with various CSS techniques to help beginners experiment with positioning, colors, transparency, and Flexbox.

See the Pen Coffee Quote – blockquote, flexbox, rgba, before content by Jacob Lett (@JacobLett) on CodePen.

QUOTE STYLING

Elegant quote styling.

See the Pen Quote styling by Joe Hastings (@JoeHastings) on CodePen.

Quote Hovering

HTML and CSS quote hovering.

See the Pen Quote hovering by Lisi (@lisilinhart) on CodePen.

PURE CSS BLOCKQUOTE

Elegant and responsive blockquote solution. Highlight quote text for a neat animation.

See the Pen Pure CSS Blockquote by John Fink (@johnfinkdesign) on CodePen.

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!

See the Pen Typography Quote by Josh Collinsworth (@joshuajcollinsworth) on CodePen.

CSS Quote Effect

Quote effect using a CSS blur filter.

See the Pen Quote Effect using a CSS Blur Filter by 14islands (@14islands) on CodePen.

Flexbox Quote Bricks

Quote Bricks with HTML and CSS flexbox.

See the Pen Flexbox Quote Bricks by Andrea Roenning (@andreawetzel) on CodePen.

POLYGON-STYLE GRADIENT PULL QUOTE

See the Pen Polygon-style gradient pull quote by Matt Popovich (@mattpopovich) on CodePen.

CSS Quote Style

HTML and CSS quote style.

See the Pen get you some bacon by Screeny (@screeny05) on CodePen.

STYLING BLOCKQUOTES

Styling blockquotes with box-shadow.

See the Pen Styling blockquotes with box-shadow by Ramón M. Cros (@ramonmcros) on CodePen.

Quote Author

Only CSS quote style.

See the Pen Day 007 Author Quote by Mohan Khadka (@khadkamhn) on CodePen.

Continuous Image Border Quote

Continuous image border quote with HTML and CSS.

See the Pen Continuous Image Border Quote by Joni Trythall (@jonitrythall) on CodePen.

Quote Animation Inspiration

Four examples of transitions quotes with the property “transform”. Four animations to see the author appear.

See the Pen Quote Animation Inspiration by Valentin Galmand (@valentingalmand) on CodePen.

Quote

HTML and CSS quote.

See the Pen Quote Test by Jose Manuel Gulias Lugo (@chepe) on CodePen.

Quote Container

Pure CSS quote container.

See the Pen Quotes by Iulian Savin (@Iulius90) on CodePen.

Subtle Quote

A small quote snippet. With subtle animations and all.

See the Pen Subtle Quote by Tim Holman (@tholman) on CodePen.

Quote Card

HTML, CSS and JavaScript quote card.

See the Pen Shiienurm quote card by Tobias Johansson (@governorfancypants) on CodePen.