QUOTE CARDS

Sliding quote cards.

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.

Author

  • Sabine Robart

Made with

  • HTML / CSS (SCSS)

QUOTE BOX HOVER EFFECTS

HTML and CSS quote with box hover effects.

Author

  • abdel Rhman

Made with

  • HTML (Pug) / CSS (SCSS)

PURE CSS QUOTE

Pure CSS quote with speech bubble border.

Author

  • Juan Pablo

Made with

  • HTML / CSS

QUOTE: STEVEN PRESSFIELD

HTML and CSS quote with top/bottom border.

Author

  • Juan Pablo

Made with

  • HTML / CSS

BLOCKQUOTE STYLES

Different styles for showing quotes. Some have gentle animations.

Author

  • Chris Smith

Made with

  • HTML / CSS (SCSS)

QUOTE EXAMPLE

Quotes with Font Awesome and pseudo elements.

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.

Author

  • Jacob Lett

Made with

  • HTML / CSS

QUOTE STYLING

Elegant quote styling.

Author

  • Joe Hasting

Made with

  • HTML
  • CSS/Less

Quote Hovering

HTML and CSS quote hovering.

Author

  • Lisi

Made with

  • Html / CSS
Demo and Download

PURE CSS BLOCKQUOTE

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

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!

Author

  • Josh Collinsworth

Made with

  • Html / CSS
Demo and Download

CSS Quote Effect

Quote effect using a CSS blur filter.

Author

  • 14islands

Made with

  • Html / CSS / Javascript
Demo and Download

Flexbox Quote Bricks

Quote Bricks with HTML and CSS flexbox.

Author

  • Andrea Roenning

Made with

  • Html / CSS
Demo and Download

POLYGON-STYLE GRADIENT PULL QUOTE

Author

  • Matt Popovich

Made with

  • HTML / CSS (SCSS)

CSS Quote Style

HTML and CSS quote style.

Author

  • Screeny

Made with

  • Html / CSS
Demo and Download

STYLING BLOCKQUOTES

Styling blockquotes with box-shadow.

Author

  • Ramón M. Cros

Made with

  • HTML / CSS (SCSS)

Quote Author

Only CSS quote style.

Author

  • Mohan Khadka

Made with

  • Html / CSS
Demo and Download

Continuous Image Border Quote

Continuous image border quote with HTML and CSS.

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.

Author

  • Valentin Galmand

Made with

  • Html / CSS
Demo and Download

Quote

HTML and CSS quote.

Author

  • Jose Manuel Gulias Lugo

Made with

  • Html / CSS
Demo and Download

Quote Container

Pure CSS quote container.

Author

  • Iulian Savin

Made with

  • Html / CSS
Demo and Download

Subtle Quote

A small quote snippet. With subtle animations and all.

Author

  • Tim Holman

Made with

  • Html / CSS / Javascript
Demo and Download

Quote Card

HTML, CSS and JavaScript quote card.

Author

  • Tobias Johansson

Made with

  • Html / CSS / Javascript
Demo and Download