QUOTE CARDS

Sliding quote cards.

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

Author

  • Sabine Robart

Made with

  • HTML / CSS (SCSS)

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.light

Author

  • Sabine Robart

Made with

  • HTML / CSS (SCSS)

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.light

Author

  • abdel Rhman

Made with

  • HTML (Pug) / CSS (SCSS)

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.light

Author

  • Juan Pablo

Made with

  • HTML / CSS

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.light

Author

  • Juan Pablo

Made with

  • HTML / CSS

BLOCKQUOTE STYLES

Different styles for showing quotes. Some have gentle animations.

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

Author

  • Chris Smith

Made with

  • HTML / CSS (SCSS)

QUOTE EXAMPLE

Quotes with Font Awesome and pseudo elements.

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

Author

  • Jaime

Made with

  • HTML
  • CSS

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.light

Author

  • Jacob Lett

Made with

  • HTML / CSS

QUOTE STYLING

Elegant quote styling.

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

Author

  • Joe Hasting

Made with

  • HTML
  • CSS/Less

Quote Hovering

HTML and CSS quote hovering.

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

Author

  • Lisi

Made with

  • Html / CSS
Demo and Download

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.light

Author

  • John Fink

Made with

  • HTML (Pug) / CSS (Sass)

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.light

Author

  • Josh Collinsworth

Made with

  • Html / CSS
Demo and Download

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.light

Author

  • 14islands

Made with

  • Html / CSS / Javascript
Demo and Download

Flexbox Quote Bricks

Quote Bricks with HTML and CSS flexbox.

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

Author

  • Andrea Roenning

Made with

  • Html / CSS
Demo and Download

POLYGON-STYLE GRADIENT PULL QUOTE

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

Author

  • Matt Popovich

Made with

  • HTML / CSS (SCSS)

CSS Quote Style

HTML and CSS quote style.

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

Author

  • Screeny

Made with

  • Html / CSS
Demo and Download

STYLING BLOCKQUOTES

Styling blockquotes with box-shadow.

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

Author

  • Ramón M. Cros

Made with

  • HTML / CSS (SCSS)

Quote Author

Only CSS quote style.

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

Author

  • Mohan Khadka

Made with

  • Html / CSS
Demo and Download

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.light

Author

  • Joni Trythall

Made with

  • Html / CSS (SCSS)
Demo and Download

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.light

Author

  • Valentin Galmand

Made with

  • Html / CSS
Demo and Download

Quote

HTML and CSS quote.

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

Author

  • Jose Manuel Gulias Lugo

Made with

  • Html / CSS
Demo and Download

Quote Container

Pure CSS quote container.

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

Author

  • Iulian Savin

Made with

  • Html / CSS
Demo and Download

Subtle Quote

A small quote snippet. With subtle animations and all.

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

Author

  • Tim Holman

Made with

  • Html / CSS / Javascript
Demo and Download

Quote Card

HTML, CSS and JavaScript quote card.

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

Author

  • Tobias Johansson

Made with

  • Html / CSS / Javascript
Demo and Download